资讯专栏INFORMATION COLUMN

百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录

G9YH / 1920人阅读

摘要:百度地图创建标签进行加载使用百度地图需要百度地图添加扩展,用于让百度地图支持地图可能会遇见两个问题地图图片错位忘记加载中使用的一个主要问题是默认图标的加载问题,详见另外也可以考虑使用动态创建标签的方法,类似百度地图加载百度地图因为本身支持的

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...

另外也可以考虑使用动态创建

阅读需要支付1元查看
<