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

目录

示例：

准备：

?编辑

开始：

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

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

3、在js中初始化地图

进阶：

1、地图标注

2、定位

3、导航

?编辑

4、公交路线规划

6、坐标转化

完整demo代码：

---

示例：

完整demo截图：

准备：

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

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

开始：

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

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=这里替换成自己的ak">
    </script>

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

<div id="map" class="mapBox"></div>

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 < allOverlay.length ; i++){
        if(allOverlay[i].id&&allOverlay[i].id==id){
            this.map.removeOverlay(allOverlay[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.ci