摘要:于是乎才選擇了百度地圖的自定義圖層,但是這個圖層無法直接跟關聯,所以只能去獲取的坐標,再去把圖層先是至相關位置點。
概要
本文只要涉及的內容有,web中動態引入百度地圖,基于百度地圖的本地搜索(公交,地鐵,停車場),自定義marker,layer,接入微信內置地圖(微信中使用第三方導航)。
效果預覽 地圖懶加載本示例應用于小程序內嵌的webview,web開發使用react。由于示例作為項目中的一個不必要模塊,不是每次進入都會加載,因此選擇在項目確定使用百度地圖時,在進行加載。即動態加載百度地圖的地圖服務資源(代碼直接從網上copy了一個):
MP(ak) { return new Promise(resolve=> { const script = document.createElement("script"); script.type = "text/javascript"; script.src = `https://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`; document.head.appendChild(script); window.init = () => { resolve(window.BMap); }; }); } openBMap() { this.MP("你的ak").then(BMap => { this.bmap = new BMap.Map("allmap"); // 創建Map實例 const mPoint = new BMap.Point(103.96120956167579, 30.67880629052847); this.bmap.enableScrollWheelZoom(); this.bmap.centerAndZoom(mPoint, 15); const options = { onSearchComplete: (results) => { if (local.getStatus() == BMAP_STATUS_SUCCESS) { this.searchResults = results; this.generateMarker(0); // 生成marker } } }; const local = new BMap.LocalSearch(this.bmap, options); // local.searchNearby(["公交站", "地鐵站", "停車場"], mPoint, 1200); }); }
local.searchNearby 為搜索附近api,搜索參數依次為搜索內容(string| arr["obj"]),搜索中心點,搜索范圍。
詳細參考:http://lbsyun.baidu.com/cms/j...
這個比較簡單,直接參考官方demo。先生成Icon,然后將icon傳入marker。
const myIcon = new BMap.Icon(imgUrl, new BMap.Size(40, 40)); const marker = new BMap.Marker(this.searchResults[index].Ar[i].point, {icon: myIcon}); marker.addEventListener("click", (e) => { this.filterMarker(e.target.point, index); }); this.bmap.addOverlay(marker);自定義layer
這個就麻煩一點了。
因為之前有使用mapbox的經驗,所以最初的思路是直接在生成的marker上添加一個popup,適當做一些偏移。但是百度地圖跟marker直接做關聯的只有一個信息窗口,即InfoWindow。當時這里花費了比較多的時間去改樣式,主要參考了這篇文章,但是改出來的效果并不太好,可能sdk的版本不太一樣吧。于是乎才選擇了百度地圖的自定義圖層,但是這個圖層無法直接跟marker關聯,所以只能去獲取marker的坐標,再去把圖層先是至相關位置點。
自定義圖層參考demo:http://lbsyun.baidu.com/jsdem...
將marker與自定義圖層關聯起來,主要依靠
pt: marker 坐標
this.bmap: 地圖實例
const clickMarker = this.searchResults.Ar.filter((v, i) => { if (v.point.lng == pt.lng && v.point.lat == pt.lat) { clickIndex = i; } return v.point.lng == pt.lng && v.point.lat == pt.lat; });
marker 的過濾主要依賴點擊獲取的經緯度,與初始搜索存儲的marker列表進行對比。(點擊事件中未找到uid,故對比經緯度)。
將得到的點擊marker 中的信息傳入圖層,在marker點擊事件中注冊 地圖的移動事件,即 this.bmap.panTo(pt); 保證每次點擊marker 將地圖移至中心。
調用騰訊內部地圖在小程序中通過,openLocation 來打開微信內置地圖,這里有兩個點要注意。一是小程序的openLocation 接受的經緯度必須是number,即:
wx.openLocation({ latitude: +gcjPoint[1], longitude: +gcjPoint[0], name: destination.title, address: destination.address, scale: 18 });
第二點是騰訊(國內)地圖接受的坐標都是gcj02(火星坐標),如果傳入wgs84(全球坐標)會存在一定距離的偏差。這里把網上的一段wgs84 轉 gcj02 代碼用es6 重寫了一遍。
class Wgs2Gcj { a = 6378245.0; ee = 0.00669342162296594323; constructor(wgLon, wgLat) { this.wgLat = wgLat; this.wgLon = wgLon; } outOfChina(lon, lat) { if (lon < 72.004 || lon > 137.8347) return true; if (lat < 0.8293 || lat > 55.8271) return true; return false; } transform() { if (this.outOfChina(this.wgLon, this.wgLat)) { return [this.wgLon, this.wgLat]; } let dLat = this.transformLat(this.wgLon - 105.0, this.wgLat - 35.0); let dLon = this.transformLon(this.wgLon - 105.0, this.wgLat - 35.0); let radLat = this.wgLat / 180.0 * Math.PI; let magic = Math.sin(radLat); magic = 1 - this.ee * magic * magic; let sqrtMagic = Math.sqrt(magic); dLat = (dLat * 180.0) / ((this.a * (1 - this.ee)) / (magic * sqrtMagic) * Math.PI); dLon = (dLon * 180.0) / (this.a / sqrtMagic * Math.cos(radLat) * Math.PI); let mgLat = this.wgLat + dLat; let mgLon = this.wgLon + dLon; return [mgLon, mgLat]; } transformLat(x, y) { let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x)); ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0; ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0; return ret; }; transformLon(x, y) { let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x)); ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0; ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0; ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0; return ret; }; }
調用方法:
const gcjPoint = new Wgs2Gcj(destination.point.lng, destination.point.lat).transform();
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104909.html
摘要:一前言在使用百度地圖開發的過程中,查閱百度地圖官網基本上就能滿足開發的需求,但是有時候需要設置一些東西,很難在官網上查閱到相關的方法技巧。希望百度地圖能夠越來越強大,這樣開發者就可以愉快的開發了 一 前言 在使用百度地圖開發的過程中,查閱百度地圖官網demo基本上就能滿足開發的需求,但是有時候需要設置一些東西,很難在官網上查閱到相關的方法技巧。筆者特意把開發過程中遇到的一些疑難雜癥和解...
摘要:簡體中文特性如何使用安裝使用安裝,你也可以在頁面中引入構建后的文件。順便校正下地圖窗口接下來我們要取消事件監聽點擊此處查看更多示例 showImg(https://segmentfault.com/img/bVbuafN?w=200&h=200); 使用同一套代碼創建你的 web 地圖應用。 ? https://github.com/XingzheFE/... English | 簡體...
摘要:目錄如何在地圖上添加自定義覆蓋物點首發日期如何在地圖上添加自定義覆蓋物點如何在地圖上添加自定義覆蓋物點此文重點是在地圖上標點,所以就省去引入百度地圖的步驟了。這個效果主要是利用百度地圖的覆蓋物來實現的。目錄 如何在地圖上添加自定義覆蓋物(點) 首發日期:2019-1-25 如何在地圖上添加自定義覆蓋物(點) 此文重...
入門 Leaflet 之小 Demo 寫在前面 ---- WebGIS 開發基礎之 Leaflet GIS 基本概念:GIS、Map、Layer、Feature、Geometry、Symbol、Data(Point、Polyline、Polygon)、Renderer、Scale、Project、Coordinates; GIS 開發概述:架構模式、常用平臺和 SDK、二維三維 使用 Lea...
閱讀 3316·2021-11-16 11:45
閱讀 4385·2021-09-22 15:38
閱讀 2841·2021-09-22 15:26
閱讀 3347·2021-09-01 10:48
閱讀 827·2019-08-30 15:56
閱讀 715·2019-08-29 13:58
閱讀 1487·2019-08-28 18:00
閱讀 2160·2019-08-27 10:53