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

栏目: 数据库 · 发布时间: 5年前

内容简介:创建 script标签进行加载使用:需要

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web渗透技术及实战案例解析

Web渗透技术及实战案例解析

陈小兵 / 范渊、孙立伟 / 电子工业出版社 / 2012-4 / 89.00元

《Web渗透技术及实战案例解析》从Web渗透的专业角度,结合网络安全中的实际案例,图文并茂地再现Web渗透的精彩过程。《Web渗透技术及实战案例解析》共分7章,由浅入深地介绍和分析了目前网络流行的Web渗透攻击方法和手段,并结合作者多年的网络安全实践经验给出了相对应的安全防范措施,对一些经典案例还给出了经验总结和技巧,通过阅读《Web渗透技术及实战案例解析》可以快速掌握目前Web渗透的主流技术。《......一起来看看 《Web渗透技术及实战案例解析》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具