地圖縮放級別ZOOM的獲取和設定之后，繼續地址關鍵字模糊查詢、出行路線規劃以及路線規劃折線自定義、圖示自定義，
先貼上一些自定義全域方法，免得下面蒙圈：
/** * @name: customMethods * @author: ASUS * @date: 2020-12-30 15:54 * @description：BMap自定義一些通用全域方法 * @update: 2020-12-30 15:54 */ const BMap = window.BMap; /** * 添加搜索自動完成物件 * @param {String} inputNode：input框節點 * 例：'routeStartAddress' * @param {Object} instance：當前地圖實體 * 例：Ka {…} * @param {Function} onSearchCompleteCallBack：在input框中輸入字符后，發起串列檢索，檢索完成后的回呼函式 */ const BMapAutocomplete = (inputNode, instance, onSearchCompleteCallBack) => { return new BMap.Autocomplete({ // 建立一個自動完成的物件 input: inputNode, location: instance, onSearchComplete: onSearchCompleteCallBack ? onSearchCompleteCallBack : null }); }; /** * BMap onconfirm事件回傳值拼接 */ const BMapOnconfirmJoinValue = e => { let _value = e.item.value, confirmValue = ""; if (_value.district === _value.business) { confirmValue = _value.province + _value.city + _value.district + _value.street; } else if (_value.city === _value.district) { confirmValue = _value.province + _value.city + _value.street + _value.business; } else { confirmValue = _value.province + _value.city + _value.district + _value.street + _value.business; } return confirmValue; }; /** * 獲取選定地址經緯度坐標 * @param {Object} instance：當前地圖實體 * 例：Ka {…} * @param {String} address：定位地址 * 例：'北京市東城區天安門' * @param {Function} callBack：搜索結果回呼 */ const BMapGetPlacePoint = (instance, address, callBack) => { function myFun() { var point = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果 instance.panTo(point); instance.setZoom(17); callBack(new BMap.Point(point.lng, point.lat)); } var local = new BMap.LocalSearch(instance, { //智能搜索 onSearchComplete: myFun }); local.search(address); }; /** * 添加定位標注 * @param {Object} instance：當前地圖實體 * 例：Ka {…} * @param {Array} point：定位坐標 * 例：N {lng: 116.403963, lat: 39.915119}(天安門坐標) * @param {Boolean} markerClearState：標注是否可清除 * 例：true: 可清除；false: 不可清除 */ const BMapSetMarker = (instance, point, markerClearState) => { let marker = new BMap.Marker(point); // 定義標注物件 instance.addOverlay(marker); // 添加標注 marker.setAnimation(window.BMAP_ANIMATION_BOUNCE); // 標注影片，設定標注影片效果，如果引數為null，則取消影片效果，該方法需要在addOverlay方法后設定 if (!markerClearState) { marker.disableMassClear(); // 禁止覆寫物(標注)在map.clearOverlays方法中被清除 } }; /** * 添加自定義定位標注 * @param {Object} instance：當前地圖實體 * 例：Ka {…} * @param {Array} point：定位坐標 * 例：N {lng: 116.403963, lat: 39.915119}(天安門坐標) * @param {Boolean} markerClearState：標注是否可清除 * 例：true: 可清除；false: 不可清除 */ const BMapSetCustomMarker = (instance, point, markerClearState) => { let myIcon = new BMap.Icon( require("../assets/images/location_fill.svg"), new BMap.Size(32, 32), { // 指定定位位置(圖示中央下端的尖角位置)， // 當標注顯示在地圖上時，其所指向的地理位置距離圖示左上角各偏移(寬：圖片寬的一半像素)和(高：圖片的高度像素)，故此定位位置即(16,32) anchor: new BMap.Size(16, 32), // 設定圖片偏移，當需要從一幅較大的圖片中截取某部分作為標注圖示時，則需要指定大圖的偏移位置，此做法與css sprites類似， imageOffset: new BMap.Size(0, 0) // 設定圖片偏移 } ); let marker = new BMap.Marker(point, { icon: myIcon }); // 定義標注物件 instance.addOverlay(marker); // 添加標注 marker.setAnimation(window.BMAP_ANIMATION_BOUNCE); // 標注影片，設定標注影片效果，如果引數為null，則取消影片效果，該方法需要在addOverlay方法后設定 if (!markerClearState) { marker.disableMassClear(); // 禁止覆寫物(標注)在map.clearOverlays方法中被清除 } }; export default { BMapAutocomplete: BMapAutocomplete, BMapOnconfirmJoinValue: BMapOnconfirmJoinValue, BMapGetPlacePoint: BMapGetPlacePoint, BMapSetMarker: BMapSetMarker, BMapSetCustomMarker: BMapSetCustomMarker };
一、地址關鍵字模糊查詢
1、添加搜索自動完成物件
// 在input框中輸入字符后，發起串列檢索，檢索完成后的回呼函式，這里暫時沒什么用，就占占位 getAutocompleteResult(val) { if (val.Hr.length) { console.log(val.Hr); } }, // 添加搜索自動完成物件 addAutocomplete() { this.routeStartAddress = this.customMethods.BMapAutocomplete( "routeStartAddress", this.mapInstance, this.getAutocompleteResult ); this.routeEndAddress = this.customMethods.BMapAutocomplete( "routeEndAddress", this.mapInstance ); let that = this; this.routeStartAddress.addEventListener("onconfirm", async function(e) { // 滑鼠點擊下拉串列后的事件，選擇下拉串列內的地址項，進行地址值的決議、拼接，然后根據地址值獲取選定地址經緯度坐標，最后設定標注 let confirmValue =https://www.cnblogs.com/dihong/p/ that.customMethods.BMapOnconfirmJoinValue(e); that.customMethods.BMapGetPlacePoint( that.mapInstance, confirmValue, function(data) { that.customMethods.BMapSetMarker(that.mapInstance, data, false); that.routeStartAddress = data; } ); }); this.routeEndAddress.addEventListener("onconfirm", function(e) { let confirmValue =https://www.cnblogs.com/dihong/p/ that.customMethods.BMapOnconfirmJoinValue(e); that.customMethods.BMapGetPlacePoint( that.mapInstance, confirmValue, function(data) { that.customMethods.BMapSetMarker(that.mapInstance, data, false); that.routeEndAddress = data; } ); }); },
(完成模糊搜索)
(地址選擇，顯示回呼)，
(地址定位，添加定位標注)
二、出行路線規劃
1、添加交通方式
// 添加交通方式 addRouteStyle() { // 駕車 this.routeStyleObj.drivingRoute = new BMap.DrivingRoute( this.mapInstance, { renderOptions: { map: this.mapInstance, panel: "results", autoViewport: true } } ); // 公交 this.routeStyleObj.transitRoute = new BMap.TransitRoute( this.mapInstance, { renderOptions: { map: this.mapInstance, panel: "results" } } );
// 步行 this.routeStyleObj.walkingRoute = new BMap.WalkingRoute( this.mapInstance, { renderOptions: { map: this.mapInstance } } ); // 騎行，3.0版本新添加的 // this.routeStyleObj.ridingRoute = new BMap.RidingRoute(this.mapInstance, { // renderOptions: { map: this.mapInstance } // }); },
2、根據輸入的開始地址、結束地址繪制路線
// 繪制路線 setRouteLine(routeStyle) { if (this.routeStartAddress && this.routeEndAddress) { this.mapInstance.clearOverlays(); // 繪制路線時，清除地圖上上一次舊有路線 this.routeStyleObj[routeStyle].search( // 路線繪制，API2.0支持關鍵字(地址)，經緯坐標兩種方式的查詢(注：可以用坐標的話，盡量坐標；關鍵字查詢經常會定位不準，跑東大西洋、西印度洋(靠澳洲)等情況) this.routeStartAddress, this.routeEndAddress ); } }
(駕車)、
(公交)、
(步行)
三、路線規劃折線自定義
從上面的路線規劃看出，駕車和公交的折線顯示很類似，不仔細看，看不出有多大區別；而步行路線由于是虛線，且顏色較淺，如果在一些綠植區域(公園等)很難看得分明，所以需要對這些折線圖進行處理，使路線規劃看起來更清晰，更明朗，
1、在各個交通方式實體內 添加折線添加完成后的回呼函式(路線規劃原API繪制)
// 添加交通方式 addRouteStyle() { // 駕車 this.routeStyleObj.drivingRoute = new BMap.DrivingRoute( this.mapInstance, { renderOptions: { map: this.mapInstance, panel: "results", autoViewport: true }, onPolylinesSet: this.drivingRoutePolylinesSetCallback // 折線添加完成后的回呼函式 } ); // 公交 this.routeStyleObj.transitRoute = new BMap.TransitRoute( this.mapInstance, { renderOptions: { map: this.mapInstance, panel: "results" }, onPolylinesSet: this.transitRoutePolylinesSetCallback } ); // 步行 this.routeStyleObj.walkingRoute = new BMap.WalkingRoute( this.mapInstance, { renderOptions: { map: this.mapInstance }, onPolylinesSet: this.walkingRoutePolylinesSetCallback } ); // 騎行，3.0版本新添加的 // this.routeStyleObj.ridingRoute = new BMap.RidingRoute(this.mapInstance, { // renderOptions: { map: this.mapInstance } // }); },
2、定義折線添加完成后的回呼函式，以及新折線繪制函式
// 駕車路線規劃自定義顯示(自定義的只是路線的顯示樣式，路線還是系統給定的路線) drivingRoutePolylinesSetCallback(result) { // 清除原路線規劃顯示，便于自定義路線規劃顯示 this.routeStyleObj.drivingRoute.clearResults(); this.setNewPolyline(result, { strokeColor: "#438EFF", strokeStyle: "solid" }); }, // 公交路線規劃自定義顯示 transitRoutePolylinesSetCallback(result) { this.routeStyleObj.transitRoute.clearResults(); this.setNewPolyline(result, { strokeColor: "#05cc2f" }); }, // 步行路線規劃自定義顯示 walkingRoutePolylinesSetCallback(result) { this.routeStyleObj.walkingRoute.clearResults(); this.setNewPolyline(result, { strokeColor: "#ff2806", strokeStyle: "solid" }); }, // 設定新路線折線 setNewPolyline( result, { strokeColor = "#438EFF", strokeWeight = 6, strokeOpacity = 0.8, strokeStyle = "solid" } ) { let points = []; result[0].Gr.map(function(item) { // 獲取行程沿途路線節點坐標 points.push(new BMap.Point(item.lng, item.lat)); }); let polyline = new BMap.Polyline(points, { strokeColor: strokeColor, strokeWeight: strokeWeight, strokeOpacity: strokeOpacity, strokeStyle: strokeStyle }); // 創建路線折線 this.mapInstance.addOverlay(polyline); // 添加路線折線 },
(駕車)、
(公交)
(步行)，現在再來看，駕車、公交、以及步行，明顯能看出來各自是不同的交通方式和行程路線上的區分，
四、圖示(標注)自定義
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/244637.html
標籤：JavaScript