摘要：于是乎才選擇了百度地圖的自定義圖層，但是這個(gè)圖層無法直接跟關(guān)聯(lián)，所以只能去獲取的坐標(biāo)，再去把圖層先是至相關(guān)位置點(diǎn)。

本文只要涉及的內(nèi)容有，web中動(dòng)態(tài)引入百度地圖，基于百度地圖的本地搜索（公交，地鐵，停車場(chǎng)），自定義marker，layer，接入微信內(nèi)置地圖（微信中使用第三方導(dǎo)航）。

本示例應(yīng)用于小程序內(nèi)嵌的webview，web開發(fā)使用react。由于示例作為項(xiàng)目中的一個(gè)不必要模塊，不是每次進(jìn)入都會(huì)加載，因此選擇在項(xiàng)目確定使用百度地圖時(shí)，在進(jìn)行加載。即動(dòng)態(tài)加載百度地圖的地圖服務(wù)資源（代碼直接從網(wǎng)上copy了一個(gè)）：

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");            // 創(chuàng)建Map實(shí)例
                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(["公交站", "地鐵站", "停車場(chǎng)"], mPoint, 1200);
            });
    }

local.searchNearby 為搜索附近api，搜索參數(shù)依次為搜索內(nèi)容（string| arr["obj"]），搜索中心點(diǎn)，搜索范圍。
詳細(xì)參考：http://lbsyun.baidu.com/cms/j...

這個(gè)比較簡(jiǎn)單，直接參考官方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);

這個(gè)就麻煩一點(diǎn)了。
因?yàn)橹坝惺褂胢apbox的經(jīng)驗(yàn)，所以最初的思路是直接在生成的marker上添加一個(gè)popup，適當(dāng)做一些偏移。但是百度地圖跟marker直接做關(guān)聯(lián)的只有一個(gè)信息窗口，即InfoWindow。當(dāng)時(shí)這里花費(fèi)了比較多的時(shí)間去改樣式，主要參考了這篇文章，但是改出來的效果并不太好，可能sdk的版本不太一樣吧。于是乎才選擇了百度地圖的自定義圖層，但是這個(gè)圖層無法直接跟marker關(guān)聯(lián)，所以只能去獲取marker的坐標(biāo)，再去把圖層先是至相關(guān)位置點(diǎn)。

自定義圖層參考demo：http://lbsyun.baidu.com/jsdem...

將marker與自定義圖層關(guān)聯(lián)起來，主要依靠
pt: marker 坐標(biāo)
this.bmap: 地圖實(shí)例

 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 的過濾主要依賴點(diǎn)擊獲取的經(jīng)緯度，與初始搜索存儲(chǔ)的marker列表進(jìn)行對(duì)比。（點(diǎn)擊事件中未找到uid，故對(duì)比經(jīng)緯度）。

將得到的點(diǎn)擊marker 中的信息傳入圖層，在marker點(diǎn)擊事件中注冊(cè) 地圖的移動(dòng)事件，即 this.bmap.panTo(pt); 保證每次點(diǎn)擊marker 將地圖移至中心。

在小程序中通過，openLocation 來打開微信內(nèi)置地圖，這里有兩個(gè)點(diǎn)要注意。一是小程序的openLocation 接受的經(jīng)緯度必須是number，即：

 wx.openLocation({
            latitude: +gcjPoint[1],
            longitude: +gcjPoint[0],
            name: destination.title,
            address: destination.address,
            scale: 18
        });

第二點(diǎn)是騰訊（國(guó)內(nèi)）地圖接受的坐標(biāo)都是gcj02（火星坐標(biāo)），如果傳入wgs84（全球坐標(biāo)）會(huì)存在一定距離的偏差。這里把網(wǎng)上的一段wgs84 轉(zhuǎn) 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;
    };
}

調(diào)用方法：

 const gcjPoint = new Wgs2Gcj(destination.point.lng, destination.point.lat).transform();