項目最近需要實現地圖,最后實現的樣子大概是這樣。
通過這次功能實現,我感覺到我確實有了些程序思維了。
一開始看到需求,我聯想到前段時間的中國疫情地圖,又想到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。
以上,我實現中國部分省份地圖的思路,分享給遇到類似問題的朋友~