echarts中使用百度地图(注意文章时间)

今天项目中使用echarts结合百度地图进行图形绘制。具体操作流程可以看其他人的文章
这里推荐一篇:Vue + Echarts + 百度地图 实践

问题描述

项目环境: vue

照着上面的流程,注册了百度开发者,在index.html中引入了百度的api

<script type="text/javascript" src="http://api.map.baidu.com/apiv=3.0&ak=你的ak"></script>

装了echarts包,在图形绘制组件map中引入了bmap套件:

import 'echarts/extension/bmap/bmap';

百度地图个性化编辑这里进行地图编辑并把生成好的json文件下载,把json数据放到项目中。
(其他配置typescript的操作就不说了)好了,本来以为大功告成,结果在个性化地图编辑那边编辑好之后,把生成的json放到echarts的bmap的mapStyle的styleJson里面的时候,发现没效果啊

let result: any = {
      title: {
        text: '全国主要城市空气质量 - 百度地图',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center'
      },
      tooltip : {
        trigger: 'item'
      },
      bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true,
        mapStyle: {
            styleJson: styleJson // styleJson是从另一个文件引入的json数据,就是个性化编辑生成的json数据
        }
    }

加进去之后全都是百度地图默认的样式,没有变化。

解决方法

  1. 对比了一下echarts的官方例子,和我的json,发现颜色好像不对,echarts那边是6位16进制颜色值,但是我这边生成的是8位的。改了几个颜色值发现还是没用。

  2. 然后怀疑echarts的是支持旧版的百度地图个性化,因为百度地图的个性化地图这个文档有说明。

    个性化地图说明

仔细观察了一下echarts里面的百度地图的绘制方式,发现还真是瓦片图。好的,确定是旧版无误了。

然后去找旧版的地图编辑器:旧版地图编辑器
编辑样式完成后,把json贴上,刷新,大功告成。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • echarts.js原先可以不使用百度地图API,直接实现迁徙图的效果。后来因为一些原因,地理信息的定位需要借助百...
    chan2017阅读 11,807评论 2 1
  • 官网奉上ECharts vue项目中可以引入echarts或者vue echarts,大致区别如下: echart...
    球_97阅读 24,308评论 2 12
  • LBS 位置服务 基于位置的服务,它是通过电信移动运营商的无线电通讯网络(如GSM网、CDMA网)或外部定位方式(...
    景岳阅读 4,589评论 1 0
  • 1.先要创建百度api的应用 传送门http://lbsyun.baidu.com/apiconsole/key/...
    小悟空大仙人阅读 7,629评论 0 1
  • 特种兵第三周常规作业: 作业一:每日晨间朋友圈见证(必须在12点之前完成)+10分【 绒布峰针团队营销特种兵21天...
    钟仁芬阅读 2,778评论 0 0

友情链接更多精彩内容