百度地图创建与打点-获取精准定位

初始化地图实例

<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)