Echarts中使用Draw Polygon on Map地图等(史上最详细)
项目需要接入这样的图1.引入echarts等,就不用多说了.2.copy代码3.我们会发现浏览器报错,⑴第一种错误[Vue warn]: Error in nextTick: "TypeError: api.coord is not a function"在echarts中搜索api,然后打印,找到这个coord方法然后在项目代码中打印这个api然后看接着找问题,看配置代码...
·
项目需要接入这样的图
1.引入echarts等,就不用多说了.
2.copy代码
3.我们会发现浏览器报错,
⑴第一种错误
[Vue warn]: Error in nextTick: "TypeError: api.coord is not a function"
在echarts中搜索api,然后打印,找到这个coord方法
然后在项目代码中打印这个api
然后看接着找问题,看配置代码时发现
这几个属性在配置手册中查不到信息,通过百度得知,还需要引入百度地图的ak接口.
然后注册百度地图AK(自行百度方法),提醒一下一定要选择浏览器端
然后找到我们的index.html加上下面的代码(ak后面填你注册的ak)
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
接下来我们回到地图的页面,如果下的是echarts的完整包的话直接引入bmap
import 'echarts/extension/bmap/bmap'
然后就可以正常的出来图了
如果还有报echarts为undifine的错,可能是下面的错误
解决方法是
如果还有什么问题,欢迎下方留言
关于控制地图放大缩小
myChart.on('finished', () => { //设置倍数
// 从echarts对象中获取bmap对象
var bmap = myChart.getModel().getComponent('bmap').getBMap();
// 设置最小缩放值
bmap.setMinZoom(5);
// 设置最大缩放值
bmap.setMaxZoom(6);
// 缩放结束后的事件
bmap.addEventListener('zoomend', function () {
// 打印出当前缩放值
console.log("打印当前倍数", bmap.getZoom());
})
})
不知道自己百度地图是啥版本的打开node_modules文件夹,找到echarts包然后如图.妈个鸡的之前看抄别人代码是https//api.我这个2.0版本只支持http,虽然不影响使用,一直报错,真整蒙了.
更多推荐
已为社区贡献14条内容
所有评论(0)