前端html，vue使用第三方地图详细教程，以百度地图为例，实现地图标注，导航，定位，路线规划，坐标转换

目录

示例：

准备：

​编辑

开始：

1、新建页面，在 script 标签中引入百度地图的 api 数据，把自己在控制台创建的应用的 ak 替换上去

2、创建一个 dom 对象，设置宽高

3、在 js 中初始化地图

进阶：

1、地图标注

2、定位

3、导航

​编辑

4、公交路线规划

6、坐标转化

完整 demo 代码：

示例：

完整 demo 截图：

准备：

1、注册百度地图 api 账号，地址：百度地图开放平台

2、进入控制台 – 应用管理 – 我的应用 – 创建应用，填写相关信息

开始：

1、新建页面，在 script 标签中引入百度地图的 api 数据，把自己在控制台创建的应用的 ak 替换上去

2、创建一个 dom 对象，设置宽高

3、在 js 中初始化地图

// 初始化地图
initMap(){var map = new BMapGL.Map("map");// 绑定创建的 dom 元素的 id
    var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
},

完成以上步骤就能看到基础的一张地图了

进阶：

1、地图标注

实现效果，点击地图弹出弹框，输入信息，添加一个标注点。

要实现该效果首先要监听点击事件

this.map.addEventListener('click', this.addLabel);

点击添加标注点

// 添加地图标点
addLabel(e) {
    let that = this
    var point =  new BMapGL.Point(e.latlng.lng, e.latlng.lat)
    var mk = new BMapGL.Marker(point);
    console.log(mk);
    this.$prompt('请输入内容', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    }).then(({value}) => {mk.id = Math.random()*100000000000000000
        mk.text = value?value:''
        console.log(mk);
        this.mkList.push({id:mk.id,text:mk.text,latLng:mk.latLng})
        this.map.addOverlay(mk);
        var opts = {
            width : 200,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title : "" , // 信息窗口标题
            message:""
        }
        var infoWindow = new BMapGL.InfoWindow(value?value:'', opts);  // 创建信息窗口对象 
        mk.addEventListener("click", function(e){that.map.openInfoWindow(infoWindow, point); // 开启信息窗口
        });
    }).catch(() => {});
},

删除标点（根据添加时生成的 id 去标点集合里匹配，删除对应 id 的数据）

// 删除地图标点
deleteLabelById(id){var allOverlay = this.map.getOverlays();
    for (var i = 0; i 

2、定位

// 获取定位
var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){map.centerAndZoom(r.point, 15); //r.point 就是当前定位坐标，设置为地图中心点
        var mk = new BMapGL.Marker(r.point); 
        map.addOverlay(mk);// 添加标点
        map.panTo(r.point);
        console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
        that.city = r.address.city
        that.address = `${r.address.province}-${r.address.city}-${r.address.district}-${r.address.street}-${r.address.street_number} 号 ` // 中文 详细地址
    }
    else {alert('failed' + this.getStatus());
    } 
});

3、导航

（this.p1 是终点坐标，this.p2 是起点坐标）

if(this.type==1){
    // 行车导航路线规划
    var output = ''
    this.driving = new BMapGL.DrivingRoute(this.map, {renderOptions:{map: this.map, autoViewport: true},
        onSearchComplete: function(results){if (that.driving.getStatus() != BMAP_STATUS_SUCCESS){return ;}
            var plan = results.getPlan(0);
            output += '总时长：' + plan.getDuration(true);  // 获取时间
            output += '总路程：' + plan.getDistance(true);  // 获取距离
            that.output = output
            console.log(output)
        },
    });
    // p2,p1 为起点和目标点的坐标
    this.driving.search(this.p2, this.p1);
}else if(this.type==2){
    // 公交路线规划
    var output = ''
    this.transit = new BMapGL.TransitRoute(this.map,{renderOptions: {map: this.map,panel:'panel'},
    onSearchComplete: function(results){if (that.transit.getStatus() != BMAP_STATUS_SUCCESS){return ;}
            var plan = results.getPlan(0);
            output += '总时长：' + plan.getDuration(true);  // 获取时间
            output += '总路程：' + plan.getDistance(true);  // 获取距离
            that.output = output
            console.log(output)
        },
    });
    this.transit.search(this.p2, this.p1);
}else{
    // 步行路线规划
    var output = ''
    this.walking = new BMapGL.WalkingRoute(this.map, {renderOptions:{map: this.map, autoViewport: true},
        onSearchComplete: function(results){if (that.walking.getStatus() != BMAP_STATUS_SUCCESS){return ;}
            var plan = results.getPlan(0);
            output += '总时长：' + plan.getDuration(true);  // 获取时间
            output += '总路程：' + plan.getDistance(true);  // 获取距离
            that.output = output
            console.log(output)
        },
    });
    this.walking.search(this.p2, this.p1);
}

4、公交路线规划

注意：公交车导航可以配置以下参数获取公交路线规划

renderOptions: {map: this.map,panel:'panel'},

6、坐标转化

目前国内主要有以下三种坐标系：

WGS84：为一种大地坐标系，也是目前广泛使用的 GPS 全球卫星定位系统使用的坐标系。

GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由 WGS84 坐标系经加密后的坐标系。

BD09：为百度坐标系，在 GCJ02 坐标系基础上再次加密。其中 bd09ll 表示百度经纬度坐标，bd09mc 表示百度墨卡托米制坐标。

非中国地区地图，服务坐标统一使用 WGS84 坐标。

百度地图需要用 BD09 坐标，如果是天地图坐标（WGS84）, 则需要作转化

WGS84 — 转 –> BD09

var convertor = new BMapGL.Convertor();
let point = new BMapGL.Point(intitude,latitude) //intitude,latitude 为天地图坐标
convertor.translate([point], COORDINATES_WGS84, COORDINATES_BD09, (data)=>{if(data.status === 0) {let point = data.points[0]
        if(point){
            // 此时得到的就是百度地图坐标
            console.log(point)
        }
    }
})

完整 demo 代码：

    
    
    
    
    
    
    
    
    


    

        

            
        
        

            

                

                     当前位置:
                    {{address}}
                     暂无定位 
                
                
 地址坐标:({{p2.lng}},{{p2.lat}})
                

                    
 目的地：
                    

                        
                    
                    

                         搜索 
                         导航 
                    
                
                

                    
 规划导航路线：
                    

                        
                            
                            
                        
                    
                
                

                    
 开启 / 关闭交通流量情况：
                    

                        
                    
                
                

                    
 开启 / 关闭地图标注 ( 单击添加 
                        )：
                    

                        
                    
                
                

                    
 显示 / 隐藏地图标注 
                    

                        
                    
                
                
{{output}}