博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录
阅读量:6969 次
发布时间:2019-06-27

本文共 922 字,大约阅读时间需要 3 分钟。

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

webpack+osm地图+leaflet

可能会遇见两个问题:

1 地图图片错位 忘记加载leaflet.css
2 webpack 中使用leaflet 的一个主要问题是默认图标的加载问题,详见

另外也可以考虑使用动态创建<script>标签的方法,类似百度地图加载

webpack+百度地图+leaflet

因为leaflet本身支持的是WGS84的坐标系 ,而百度地图在中国使用的是百度坐标系,所以如果要在百度地图中使用leaflet的话,一是需要绘图数据变更为百度地图的BD09坐标系,二是需要对leaflet添加扩展,使其在进行经纬度坐标转化时使用百度地图的映射系统

解决方案:

以上问题的代码示例

转载地址:http://adssl.baihongyu.com/

你可能感兴趣的文章
【一步步学OpenGL 20】 -《点光源》
查看>>
工作总结 获取html 标签 自定义属性值 根据html 自定义属性 获取 到标签...
查看>>
帧中继网络 (转)
查看>>
同步与异步 阻塞与非阻塞
查看>>
spring boot项目中处理Schedule定时任务
查看>>
最简单易懂的SpringCloudSleuth教程
查看>>
为什么可视化数据有一定的误差值?
查看>>
Android应用安全风险与防范
查看>>
硅谷亿万富翁彼得·泰尔的神秘大数据公司在新西兰遭审查
查看>>
参加工业软件与制造业融合发展高峰论坛 用友3.0加速落地
查看>>
赌Impinj就是赌RFID行业
查看>>
亚马逊数据专家十年经验总结:成为数据科学家的关键四步
查看>>
普京签订反恐法:互联网公司将增加数十亿美元成本
查看>>
微软详细说明了用户在Word和Outlook中的前10个语法错误
查看>>
如何弱化因不同软件测试人员测试而引发的BUG率上涨的现象?
查看>>
SAP云计算产品线关键功能扩展升级
查看>>
Com0com+com2tc 试用
查看>>
web版文本编辑器
查看>>
spring与spring MVC的区别
查看>>
活动目录的综合应用(二)
查看>>