| vue结合百度地图api实现地址检索、路线规划等功能 | 您所在的位置：网站首页 › 怎样用百度地图查公交线路 › vue结合百度地图api实现地址检索、路线规划等功能 |
vue结合百度地图api实现地址检索、路线规划等功能
|
vue+百度地图api
引入百度地图api获取用户当前位置地址检索（定位）路线规划修改路线规划中的图标图案修改提示框等样式
引入百度地图api
在百度地图开发平台申请到自己的开发密匙 找到项目的根目录index.html位置： 创建一个div用于地图展示 初始化创建地图 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类参考文档1 例： 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) { //获取地址信息，设置地址label var 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类参考文档1 例： 添加一个用于输入地址信息的输入框： 在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({ // 输入框的id input: "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类参考文档1 例： 添加用于输入起点与终点信息的输入框，以及进行规划功能的按钮 初始化两个数据，用于储存起点与终点的经纬度 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的id panel: 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中有格式要求，如下图所示 则可能修改类名属性操作无法正常实现效果 百度地图JavaScript API v3.0类参考 ↩︎ ↩︎ ↩︎ |
在项目的根目录下的index.html文件中添加如下代码：
【本文地址】
公司简介
联系我们