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

文章正文

发布时间：2025-02-12 04:25

示例：

完整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.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、公交路线规划

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

<div id="panel"></div> renderOptions: {map: this.map,panel:'panel'},

6、坐标转化

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

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

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

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

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

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

WGS84 – 转–> BD09

标签