百度地圖 osm地圖 leaflet echarts webapck的組合使用時的踩坑記錄

webpack+百度地圖

建立 script標籤進行加載

export function MP(ak){ 
    return new Promise(function (resolve, reject){   
        window.onload = function () {     
          resolve(BMap)   
        }   
        var script = document.createElement("script");    
        script.type = "text/javascript";   
        script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";   
        script.onerror = reject;   
        document.head.appendChild(script); 
    });
 }

使用：

import {MP} from './map.js'; 
MP("your ak").then(BMap => {
    // do something
}）

webpack+百度地圖+echart

須要
1 百度地圖
2 echart
3 bmap.min.js 添加擴展，用於讓百度地圖支持echart https://github.com/apache/inc...

webpack+osm地圖+leaflet

可能會碰見兩個問題：
1 地圖圖片錯位 忘記加載leaflet.css
2 webpack 中使用leaflet 的一個主要問題是默認圖標的加載問題，詳見
https://segmentfault.com/q/10...

另外也能夠考慮使用動態建立<script>標籤的方法，相似百度地圖加載

webpack+百度地圖+leaflet

由於leaflet自己支持的是WGS84的座標系 ，而百度地圖在中國使用的是百度座標系，因此若是要在百度地圖中使用leaflet的話，一是須要繪圖數據變動爲百度地圖的BD09座標系，二是須要對leaflet添加擴展，使其在進行經緯度座標轉化時使用百度地圖的映射系統

解決方案： http://tiven.wang/articles/us...

以上問題的代碼示例 https://gitlab.com/dahou/maps