百度地图创建与打点-获取精准定位
初始化地图实例
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=自己百度地图申请ak"></script>
<script src="../js/request.js"></script>
<div id="container"></div>
<script>
var map = new BMapGL.Map('container', {
minZoom: 5,
maxZoom: 20
});
map.centerAndZoom(new BMapGL.Point(116.514, 39.915), 14);
map.enableScrollWheelZoom(true);
</script>
获取当前精准定位
setOption() {
// 获取当前经纬度-精准
let geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// 获取成功,将地图中心移动到当前位置
let point = new BMapGL.Point(r.longitude, r.latitude);//当前坐标
// 储存当前坐标
this.setmap = {
longitude: r.longitude,
latitude: r.latitude,
}
console.log(this.setmap);
map.centerAndZoom(point, 100);//数字越大显示越详细
// 添加标注点
let marker = new BMapGL.Marker(point);
map.addOverlay(marker);
}
});
},
打点路线
var pot1 = new BMapGL.Point("116.40388321804957,39.914884096217335")//经度和纬度
var pot2 = new BMapGL.Point("116.40389267104957,39.914884096217335")
// // 创建驾车实例
var driv = new BMapGL.DrivingRoute(map)
// 路线规划
driv.search(pot1, pot2,)
driv.setSearchCompleteCallback(function () {
// 通过驾车实例,获得一系列点的数组
var pts = driv.getResults().getPlan(0).getRoute(0).getPath()
var polyline = new BMapGL.Polyline(pts)
map.addOverlay(polyline)
})
// 给每个点创建Marker
var m1 = new BMapGL.Marker(pot1)
var m2 = new BMapGL.Marker(pot2)
map.addOverlay(m1)
map.addOverlay(m2)
// 自定义文本标注样式
var style = {
borderRadius: '5px',
borderColor: '#ccc',
padding: '5px',
fontSize: '16px',
height: '30px',
lineHeight: '30px',
fontFamily: '微软雅黑'
}
// 添加说明
var lab1 = new BMapGL.Label('起点', { position: pot1 })
style.backgroundColor = '#00FFFc'
lab1.setStyle(style)
var lab2 = new BMapGL.Label('站点', { position: pot2 })
style.backgroundColor = '#F5F5DC'
lab2.setStyle(style)
map.addOverlay(lab1)
map.addOverlay(lab2)
// 调整视野到最佳
setTimeout(function () {
map.setViewport([pot1, pot2])
}, 1000)