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類參考 ?? ?? ??

總結

以上是生活随笔為你收集整理的vue结合百度地图api实现地址检索、路线规划等功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。