175 lines
5.5 KiB
HTML
175 lines
5.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||
|
|
<title>百度地图</title>
|
||
|
|
<style type="text/css">
|
||
|
|
html {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
height: 100%;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#mapPage {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#container {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.input-value {
|
||
|
|
margin: 0 3%;
|
||
|
|
position: fixed;
|
||
|
|
top: 136px;
|
||
|
|
left: 0;
|
||
|
|
width: 88%;
|
||
|
|
height: 40px;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
.input-item {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border: 0.5px solid #3888ff;
|
||
|
|
outline: none;
|
||
|
|
padding: 0 10px;
|
||
|
|
border-radius: 40px;
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
margin: 0 6%;
|
||
|
|
position: fixed;
|
||
|
|
bottom: 50px;
|
||
|
|
left: 0;
|
||
|
|
width: 88%;
|
||
|
|
height: 40px;
|
||
|
|
background-color: #3888ff;
|
||
|
|
border: none;
|
||
|
|
z-index: 999;
|
||
|
|
border-radius: 40px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.btn:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="input-value">
|
||
|
|
<input class="input-item" type="text" name="" id="inputValue" placeholder="请输入工程地址" />
|
||
|
|
</div>
|
||
|
|
<div id="mapPage">
|
||
|
|
<div id="container"></div>
|
||
|
|
</div>
|
||
|
|
<button class="btn" id="btn">确定</button>
|
||
|
|
</body>
|
||
|
|
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
|
||
|
|
<!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
|
||
|
|
|
||
|
|
<!-- uni 的 SDK -->
|
||
|
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
|
||
|
|
|
||
|
|
<!-- 百度地图 -->
|
||
|
|
<script
|
||
|
|
type="text/javascript"
|
||
|
|
src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=cClgLBaLgGUdQDilX9dGvieL"
|
||
|
|
></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
document.addEventListener('UniAppJSBridgeReady', function () {
|
||
|
|
var projectAddress = ''
|
||
|
|
var latitude = ''
|
||
|
|
var longitude = ''
|
||
|
|
// 获取当前位置的经纬度
|
||
|
|
var map = new BMapGL.Map('container') // 创建地图实例
|
||
|
|
var Geocoder = new BMapGL.Geocoder() // 创建地址解析实例
|
||
|
|
var geolocation = new BMapGL.Geolocation() // 创建定位实例
|
||
|
|
var point = new BMapGL.Point(106.23849, 38.49246) // 创建点坐标
|
||
|
|
var marker = new BMapGL.Marker(point) // 创建标记
|
||
|
|
try {
|
||
|
|
geolocation.getCurrentPosition(function (r) {
|
||
|
|
console.log('🚀 ~ map:', map)
|
||
|
|
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
|
||
|
|
latitude = r.point.lat
|
||
|
|
longitude = r.point.lng
|
||
|
|
point = new BMapGL.Point(longitude, latitude) // 创建点坐标
|
||
|
|
map.panTo(point) // 将当前位置设置为地图中心
|
||
|
|
marker = new BMapGL.Marker(point) // 创建标记
|
||
|
|
map.addOverlay(marker) // 将标记添加到地图中
|
||
|
|
console.log('🚀 ~ 地址获成功:', latitude, longitude)
|
||
|
|
} else {
|
||
|
|
console.log('err-地址获取失败' + this.getStatus())
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} catch (error) {
|
||
|
|
console.log('🚀 ~ error:', error)
|
||
|
|
map.panTo(point)
|
||
|
|
map.addOverlay(marker) // 将标记添加到地图中
|
||
|
|
}
|
||
|
|
map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
||
|
|
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
|
||
|
|
// map.setHeading(64.5); //设置地图旋转角度
|
||
|
|
// map.setTilt(73); //设置地图的倾斜角度
|
||
|
|
// 点击地图获取经纬度
|
||
|
|
map.addEventListener('click', e => {
|
||
|
|
// console.log('🚀 ~ $nextTick ~ e.point:', e.latlng)
|
||
|
|
longitude = e.latlng.lng
|
||
|
|
latitude = e.latlng.lat
|
||
|
|
// 将标记点移动到点击位置
|
||
|
|
marker.setPosition(e.latlng)
|
||
|
|
// 将点击位置设置为地图中心
|
||
|
|
map.panTo(e.latlng)
|
||
|
|
// 获取点击位置的中文地址
|
||
|
|
Geocoder.getLocation(e.latlng, res => {
|
||
|
|
// console.log('🚀 ~ $nextTick ~ res:', res)
|
||
|
|
projectAddress = res.address + res.content.poi_desc || ''
|
||
|
|
// 将地址设置到输入框
|
||
|
|
document.getElementById('inputValue').value = projectAddress
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
// 失去焦点执行
|
||
|
|
document.getElementById('inputValue').addEventListener('input', handleInput)
|
||
|
|
|
||
|
|
function handleInput() {
|
||
|
|
setTimeout(() => {
|
||
|
|
Geocoder.getPoint(document.getElementById('inputValue').value, point => {
|
||
|
|
if (point) {
|
||
|
|
longitude = point.lng
|
||
|
|
latitude = point.lat
|
||
|
|
// 将标记点移动到点击位置
|
||
|
|
marker.setPosition(point)
|
||
|
|
// 将点击位置设置为地图中心
|
||
|
|
map.panTo(point)
|
||
|
|
// 获取点击位置的中文地址
|
||
|
|
Geocoder.getLocation(point, res => {
|
||
|
|
// console.log('🚀 ~ $nextTick ~ res:', res)
|
||
|
|
projectAddress = res.address + res.content.poi_desc || ''
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, 100)
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('btn').addEventListener('click', handleBtn)
|
||
|
|
|
||
|
|
function handleBtn() {
|
||
|
|
setTimeout(() => {
|
||
|
|
console.log('🚀 ~ projectAddress:', projectAddress)
|
||
|
|
uni.postMessage({
|
||
|
|
data: {
|
||
|
|
latitude,
|
||
|
|
longitude,
|
||
|
|
projectAddress
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, 100)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</html>
|