zoukankan      html  css  js  c++  java
  • echarts实现中国地图(部分省份版)

      项目最近需要实现地图,最后实现的样子大概是这样。

      

       通过这次功能实现,我感觉到我确实有了些程序思维了。

      一开始看到需求,我联想到前段时间的中国疫情地图,又想到echarts官网好像也有地图相关的例子。但当我去官网找时,发现已经没有地图的案例了。似乎因为相关法律规定而下线了。

      但没关系,网上有很多例子。

      可网上的例子大概只有2种,全国的,世界的,单省份的,没有我需要的中国地图里特定几个省份。

      先不纠结这个我问,我先需要实现个中国地图。

      实现中国地图需要2个文件,echarts、china.js。可能还需要个jquery.js。其他人的博客里应该都有链接,我就不重复贴了。

      一开始我的地图显示不出来,只显示个长方形,鼠标移上去是南海诸岛。看了下consle,发现是因为echarts文件没引好的原因。引好就可以了。

      地图显示出来了,怎么让他只显示单独几个省份?

      我看了下china.js文件,里面echarts.registerMap,这个方法,里面数据是有规律的,大概就是json方式放入数据。

      找到了阿里的这个网站

      http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

      在这里选择需要的省份,把数据填进去就好。

      地图上需要显示省份名称,在series属性里设置,

      label: {
        normal: {
          show: true
        },
        emphasis: {
          show: true
        }
      },

      右下角有个南海诸岛的东西,看上去就很丑。网上现有的2个办法,设置数据我试了,不行~鼠标移上去还是会有东西,设置geo属性,不行~不知道哪里没设对。

      于是试了下最近学到的在google里用英文关键字,找到了echarts里一个issue记录。

      把地图里的key改成china2,相应的,series里也用china2。

      以上,我实现中国部分省份地图的思路,分享给遇到类似问题的朋友~

       

  • 相关阅读:
    Palindrome Partitioning
    triangle
    Populating Next Right Pointers in Each Node(I and II)
    分苹果(网易)
    Flatten Binary Tree to Linked List
    Construct Binary Tree from Inorder and Postorder Traversal(根据中序遍历和后序遍历构建二叉树)
    iOS系统navigationBar背景色,文字颜色处理
    登录,注销
    ios 文字上下滚动效果Demo
    经常崩溃就是数组字典引起的
  • 原文地址:https://www.cnblogs.com/weixin-tt/p/13234764.html
Copyright © 2011-2022 走看看