vue结合百度地图api实现地址检索、路线规划等功能

vue+百度地图api

引入百度地图api
获取用户当前位置
地址检索（定位）
路线规划
修改路线规划中的图标图案
修改提示框等样式

引入百度地图api

在百度地图开发平台申请到自己的开发密匙

找到项目的根目录index.html位置：

在项目的根目录下的index.html文件中添加如下代码：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的秘钥"></script>

创建一个div用于地图展示

<template><div><div id="allmap" class="allmap"></div></div>
</template>

初始化创建地图

mounted() {//初始化// 创建Map实例this.map = new BMap.Map("allmap");// 初始化地图,设置中心点坐标和地图级别this.map.centerAndZoom("成都", this.mapZoom);// 设置地图显示的城市 此项是必须设置的this.map.setCurrentCity("成都");// 启用滚轮放大缩小，默认禁用this.map.enableScrollWheelZoom(true);// 启用地图惯性拖拽，默认禁用this.map.enableContinuousZoom(true);// 启用地图拖拽，默认启用this.map.enableDragging(true);const cityControl = new BMap.CityListControl({/* 控件的停靠位置（可选，默认左上角）BMAP_ANCHOR_TOP_RIGHT 右上角BMAP_ANCHOR_BOTTOM_LEFT 左下角BMAP_ANCHOR_BOTTOM_RIGHT 右下角*/anchor: BMAP_ANCHOR_TOP_LEFT,// 控件基于停靠位置的偏移量（可选）offset: new BMap.Size(10, 5),});// 将控件添加到地图上this.map.addControl(cityControl);},

获取用户当前位置

Geolocation ( ) 构造函数，用于返回用户当前的位置，会首先调用浏览器自带的定位接口，如果失败或不支持则调用高精IP定位（需要开通权限，否则调用普通定位）接口，如果用户拒绝授权定位，则无法返回任何定位结果。
具体详细信息可参考百度地图JavaScript API v3.0类参考文档¹
例：

async atten() {var address = null;//创建Geolocation对象实例var geolocation = new BMap.Geolocation();//返回用户当前位置await geolocation.getCurrentPosition(function(r) {//getStatus()用于获取定位完成后的状态码if (this.getStatus() == BMAP_STATUS_SUCCESS) {// Geocoder类用于获取用户的地址解析var gc = new BMap.Geocoder();gc.getLocation(r.point, function(rs) {//获取地址信息，设置地址labelvar addComp = rs.addressComponents;address =addComp.province +addComp.city +addComp.district +addComp.street +addComp.streetNumber; //获取地址console.log("当前位置"+address);//打印地址});} else {alert("failed" + this.getStatus());}});},

地址检索（定位）

LocalSearch(location: Map | Point | String, opts: LocalSearchOptions)用于位置检索、周边检索和范围检索。 创建一个搜索类实例，其中location表示检索区域，其类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由当前地图中心点确定，且搜索结果的标注将自动加载到地图上。
具体详细信息可参考百度地图JavaScript API v3.0类参考文档¹
例：
添加一个用于输入地址信息的输入框：

<div><el-inputsize="mini"type="text"id="city"class="inputCity"placeholder="请输入地点"></el-input>
</div>

在methods中添加如下方法：

AddressSearch() {const _this = this// 创建Map实例this.map = new BMap.Map('map')// 初始化地图,设置中心点坐标和地图级别this.map.centerAndZoom(new BMap.Point(104.072242, 30.663711), this.mapZoom)// 设置地图显示的城市 此项是必须设置的this.map.setCurrentCity('成都')//建立一个自动完成的对象//Autocomplete是结果提示、自动完成类。var Aco = new BMap.Autocomplete({// 输入框的idinput: "city",location: this.map,})Aco.addEventListener("onhighlight", function (e) {//鼠标放在下拉列表上的事件})Aco.addEventListener("onconfirm", function (e) {//鼠标点击下拉列表后的事件var _value = e.item.value;// 拼装的地址信息var myValue =_value.province +_value.city +_value.district +_value.street +_value.business;_this.setPlace(myValue);})
}
setPlace(value) {const _this = this;//this.map.clearOverlays(); //清除地图上所有覆盖物// 创建一个检索对象var local = new BMap.LocalSearch(_this.map, {//智能搜索onSearchComplete: function () {var getpo = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果_this.map.centerAndZoom(getpo, 18);_this.map.addOverlay(new BMap.Marker(getpo)); //添加标注},});local.search(e);
},

效果图：

路线规划

TransitRoute(location: Map | Point | String, opts: TransitRouteOptions) 创建一个公交导航实例。location表示检索区域，类型可为地图实例、坐标点或城市名称的字符串。当参数为地图实例时，检索位置由当前地图中心点确定；当参数为坐标时，检索位置由该点所在位置确定；当参数为城市名称时，检索会优先在该城市内进行
具体详细信息可参考百度地图JavaScript API v3.0类参考文档¹
例：
添加用于输入起点与终点信息的输入框，以及进行规划功能的按钮

<div class="plan"><div><el-inputsize="mini"type="text"id="startcity"class="inputCity"placeholder="请输入出发地"v-model="startcity"></el-input><el-inputsize="mini"type="text"id="endcity"class="inputCity"placeholder="请输入目的地"v-model="endcity"></el-input></div><el-button @click="searchByStationName1()" class="planBegin"></el-button>
</div>

初始化两个数据，用于储存起点与终点的经纬度

data(){return {from: null,to: null,}
}

在methods中添加如下方法：
通过地址检索的方式设立标注点，同时获取到起点和终点的经纬度坐标
地址检索：

// 起点地点坐标获取searchByStationName1() {const _this = this;var startAddrr = document.getElementById("startcity").value; //获得起始地地名//通过地址检索的方式设立标注点，同时获取到起点和终点的经纬度坐标var localSearch = new BMap.LocalSearch(this.map);//设置检索结束后的回调函数。localSearch.setSearchCompleteCallback(function (searchResult) {var poi = searchResult.getPoi(0); //获得起点经纬度坐标if (poi != null) {//判断地名是否存在_this.from = poi.point;//获得起点经纬度坐标//开始检索终点坐标_this.searchByStationName2();} else {alert("请输入正确的地名！");}});localSearch.search(startAddrr);},// 终点地点坐标获取searchByStationName2: function () {const _this = this;var endAddrr = document.getElementById("endcity").value; //获得目的地地名//通过地址检索的方式设立标注点，同时获取到起点和终点的经纬度坐标var localSearch = new BMap.LocalSearch(this.map,{//检索结束后是否自动调整地图视野autoViewport:false,});//设置检索结束后的回调函数。localSearch.setSearchCompleteCallback(function (searchResult) {var poi = searchResult.getPoi(0); //获得目的地经纬度坐标if (poi != null) {//判断目的地是否存在_this.to = poi.point;//调用公交规划函数_this.TransitPlan();} else {alert("请输入正确的地名！");}});localSearch.search(endAddrr);},

//公交规划TransitPlan() {const self = this;var subwaying = new BMap.TransitRoute(this.map, {//搜索结果的呈现设置renderOptions: {map: this.map,// 详细方案展示，panel的值为div的idpanel: document.getElementById("r-result"),// 拖动路线// enableDragging: true,// 是否选择第一个检索结果selectFirstResult: true,// 检索结束后是否自动调整地图视野autoViewport: true,//设置时间最少方案优先policy:BMAP_TRANSIT_POLICY_LEAST_TIME,},// 检索完成后回调onSearchComplete: function (results) {if (subwaying.getStatus() != BMAP_STATUS_SUCCESS) {return;}// 获取第一个路线var plan = results.getPlan(0);// console.log("路线结果",plan);// 获取时间plan.getDuration(true);// 获取距离plan.getDistance(true);},});//赋值起点与终点的经纬度var start = new BMap.Point(self.from.lng, self.from.lat);var end = new BMap.Point(self.to.lng, self.to.lat);  subwaying.search(start, end);//公交规划结束},

效果图：

修改路线规划中的图标图案

方法如下：

//坐标图案var startIcon = new BMap.Icon(require('../../../assets/images/坐标.png'),new BMap.Size(30, 120),{ anchor: new BMap.Size(10, 25) })var endIcon = new BMap.Icon(require('../../../assets/images/坐标.png'),new BMap.Size(30, 120),{ anchor: new BMap.Size(10, 25) })//起点终点图案重新设置airplaneing.setMarkersSetCallback(function (result) {result[0].marker.setOffset(new BMap.Size(0, 40))result[0].marker.setIcon(startIcon)result[1].marker.setOffset(new BMap.Size(12, 45))result[1].marker.setIcon(endIcon)})//初始化地图this.map.centerAndZoom('北京', 14)airplaneing.search(point1, point2)

修改提示框等样式

若发现结果提示框等信息的样式出错或消失，需要修改其样式，可以通过按F12进行开发人员调试，在元素列表中找到我们要的元素，然后获取其类名，对类名的进行css属性的修改即可

<style>
.tangram-suggestion-main {top: 100px !important;z-index: 999;
}
</style>

需要注意的是，若style中有格式要求，如下图所示

<style lang="less" scoped>

则可能修改类名属性操作无法正常实现效果

百度地图JavaScript API v3.0类参考 ↩︎ ↩︎ ↩︎