ECharts-中國省市地圖

今天偶然看到天天快遞的 "網點查詢" -> “地圖查詢” 感覺很新奇。默認展示中國行政地圖，點擊省份后展示對應的省市地圖。后來參考了 Echarts 官方實例 (https://echarts.baidu.com/examples/editor.html?c=map-HK)，寫了一個類似的 demo。

Demo 界面截圖

1,默認展示中國行政地圖

2,點擊省份展示對應市級地圖（這里以四川為例）

主要點

1,初始化地圖 s ，加載 china.json 地圖。

2,綁定 s 的點擊事件，觸發時加載不同的省份 json 地理數據（地理數據從天天官網地圖獲得。方法：點擊 "地圖查詢", chrome 調試模式下可以看到加載不同了的 json 文件）

3,如果要返回全國地圖，只要再次加載 china.json 文件即可。

4,關於區域上色等比較簡單，直接參考 echarts 即可。這里不做說明.

net core Demo下載請點擊 這里

代碼簡單說明

1,關鍵文件：_Layout.cshtml（C#的模版頁,相關js引用與前台展示）與 echarts-map-action.js（echarts 圖標操作）

2,各省地理數據文件 js/mapjson/xxx.json

3,echarts-map-action.js 中 initEcharts 方法是初始化,showProvince 方法是展示不同省的市級地圖。