美文网首页
踩坑日记:在Echarts中国地图踩到的坑

踩坑日记:在Echarts中国地图踩到的坑

作者: 喜剧之王爱创作 | 来源:发表于2020-08-10 16:55 被阅读0次
china.png

前两天在使用echart的中国地图功能时候遇到了两个比较奇葩的坑,将它分享出来,同学们“免受其害”

关于“南海诸岛”问题

这是一个严肃的话题,我们领土一寸也不能少!

但是,在开发的过程中,我却发现,“南海诸岛”缩列图竟然不显示出来,于是差了一些别人踩的坑,发现是注册的时候除了问题

chart.registerMap('china', geoJson);

注意上面在注册地图的时候,前面字段一定得是china,不能是China也不能是中国,那样都将出现问题。切记切记~~

关于文字在区域内不能居中显示

开发的时候,还发现一个问题,我所采用的china.json,其中的文字比较偏,有的都脱离了所在省份区域,这时候就需要你手动去调整了。
你需要在china.json中的对应的不正确的省份上加cp字段,值为该省的省会经纬度,具体各个省会的经纬度我在下面列出来供参考。

"properties":{"adcode":"120000","name":"天津市","cp":[117.20000,39.13333],"center":[117.190182,39.125596],

就像上面一样

各省省会经纬度(地图省份名称文字显示位置)
{
          '山东':[117.000923, 36.675807],
          '河北':[115.48333,38.03333],
          '吉林':[125.35000,43.88333],
          '黑龙江':[127.63333,47.75000],
          '辽宁':[123.38333,41.80000],
          '内蒙古':[111.670801, 41.818311],
          '新疆':[87.68333,43.76667],
          '甘肃':[103.73333,36.03333],
          '宁夏':[106.26667,37.46667],
          '山西':[112.53333,37.86667],
          '陕西':[108.95000,34.26667],
          '河南':[113.65000,34.76667],
          '安徽':[117.283042, 31.86119],
          '江苏':[119.78333,32.05000],
          '浙江':[120.20000,30.26667],
          '福建':[118.30000,26.08333],
          '广东':[113.23333,23.16667],
          '江西':[115.90000,28.68333],
          '海南':[110.35000,20.01667],
          '广西':[108.320004, 22.82402],
          '贵州':[106.71667,26.56667],
          '湖南':[113.00000,28.21667],
          '湖北':[114.298572, 30.584355],
          '四川':[104.06667,30.66667],
          '云南':[102.73333,25.05000],
          '西藏':[91.00000,30.60000],
          '青海':[96.75000,36.56667],
          '天津':[117.20000,39.13333],
          '上海':[121.55333,31.20000],
          '重庆':[106.45000, 29.56667],
          '北京': [116.41667,39.91667],
          '台湾': [121.30, 25.03],
          '香港': [114.10000,22.20000],
          '澳门': [113.50000,22.20000],
}
写在后面

踩坑记录,记录一下~~

相关文章

  • 踩坑日记:在Echarts中国地图踩到的坑

    前两天在使用echart的中国地图功能时候遇到了两个比较奇葩的坑,将它分享出来,同学们“免受其害” 关于“南海诸岛...

  • react-native native-echarts 趴坑指

    react-native 日常踩坑 下面我们探讨下native-echarts经常会踩到的坑 1、ios rele...

  • 交互设计师所要避免的几个坑

    前言 工作中难免会踩到几个坑,即使现在不踩以后还会踩,只有踩过才会深刻记住,踩过说明爱过!但是踩过的坑必须把坑填满...

  • Echarts 踩坑

    导语:近日在项目中需要用到echarts图表,因为是第一次使用echarts图表画图,所以也遇到很多坑;特意整理总...

  • 有的坑要早踩

    有的坑要早踩好处才大,因为年轻还可以有多次采坑的时间,总结经验知道为什么采坑,踩到了什么坑,而在我们年轻时,父母总...

  • Easytrader踩坑之旅(一)

    Easytrader踩坑之旅(一) 快速阅读 ​ 主要是安装easytrader过程中踩到的一个又一个坑以及换...

  • echarts踩坑记

    我快要哭了,怎么都做不出来了。无论是按照网上的教程还是把以前的代码放进现在的项目,都会报错。我不知道问题究竟在何处...

  • 一、前言

    [TOC] 开始前的BB 最近学习了一些关于FFmpeg的姿势(知识),也是踩坑踩到吐血 本着前人滚坑,后人平躺的...

  • android studio 一个诡异异常

    使用android studio总会踩到莫名其妙的坑,哈,踩了坑好像心情也没很坏,浪里个浪,好了不多说废话,直接...

  • Vue重构有赞商城

    一、记录我踩到的坑 (1)、未绑定数据:(踩坑次数:2) (2)、如何实现页面的跳转 例如:我点击水果 首先绑定2...

网友评论

      本文标题:踩坑日记:在Echarts中国地图踩到的坑

      本文链接:https://www.haomeiwen.com/subject/mjmjdktx.html