✔ 動態地圖標記教程：用 amCharts 讓全球地圖閃閃發光

項目概述#

在這個項目中，使用 amCharts 庫實現了一個動態的可視化地圖。這個地圖不僅能夠展示全球各大城市的位置，還為這些城市添加了獨特的脈動閃爍標記，讓地圖更加生動有趣。這次我將分享如何使用 amCharts 來創建這樣一個充滿視覺沖擊力的互動地圖。

完整代碼#

https://codepen.io/kkcat/pen/VwJEvxo

地圖的主要特點#

全球城市標記：這張地圖標記了世界各地的重要城市。每個城市的位置都通過地理坐標（經緯度）精確定位，確保地圖的準確性和清晰度。
脈動動畫效果：地圖上的標記點並不是靜態的圖標，而是帶有脈動動畫效果，周期性地擴大和縮小。這種動態效果為地圖增加了視覺吸引力，能夠有效地吸引用戶的注意力。
數據驅動：地圖中的標記點位置和信息是通過一個外部的 JSON 數據文件定義和加載的，這樣可以方便地更新和管理標記點信息，而不需要對核心代碼做任何更改。

JSON 數據文件的介紹#

在這個項目中，所有城市的地理位置信息都是通過一個 JSON 文件來管理的。這個 JSON 文件包含了城市的經緯度、名稱等信息，是地圖數據的核心部分。下面是 map.json 文件的一個示例：

{
  "CN": [
    { "region": "Beijing", "title": "Beijing", "latitude": 39.9042, "longitude": 116.4074 },
    { "region": "Shanghai", "title": "Shanghai", "latitude": 31.2304, "longitude": 121.4737 }
  ],
  "US": [
    { "state": "California", "title": "Los Angeles", "latitude": 34.0522, "longitude": -118.2437 },
    { "state": "New York", "title": "New York City", "latitude": 40.7128, "longitude": -74.0060 }
  ]
}

如何開發或修改 JSON 文件#

添加新城市：如果你想在地圖上添加新的城市標記，只需要在相應國家代碼下的數組中添加一個新的對象。例如，想要在中國（CN）中添加廣州，可以這樣修改：

"CN": [
  { "region": "Beijing", "title": "Beijing", "latitude": 39.9042, "longitude": 116.4074 },
  { "region": "Shanghai", "title": "Shanghai", "latitude": 31.2304, "longitude": 121.4737 },
  { "region": "Guangzhou", "title": "Guangzhou", "latitude": 23.1291, "longitude": 113.2644 }
]

修改城市信息：需要更改某個城市的顯示名稱或位置時，只需更新對應對象的 title、latitude 或 longitude 屬性。例如，調整北京的經緯度：
```
{ "region": "Beijing", "title": "Beijing", "latitude": 40.0000, "longitude": 116.4074 }
```
刪除城市標記：要移除某個城市標記，只需從 JSON 文件中刪除相應的對象。例如，刪除上海的標記：
```
"CN": [
  { "region": "Beijing", "title": "Beijing", "latitude": 39.9042, "longitude": 116.4074 }
]
```

應用場景#

這個項目具有廣泛的應用場景，比如：

展示全球數據中心或服務器位置：用來顯示公司數據中心或服務器的全球分布，幫助用戶快速了解企業的全球布局。
市場分析和商業展示：企業可以利用這張地圖展示其全球分支機構、銷售點或者合作夥伴的位置，為市場分析和決策提供直觀的地理參考。
教育和科普用途：這張地圖可以作為一個互動的教學工具，展示全球城市的地理位置，幫助學生更直觀地學習和了解地理知識。

總結#

這個項目展示了如何利用 amCharts 庫創建一個簡潔而富有互動性的動態地圖。通過添加脈動效果，地圖不僅僅作為數據展示的工具，還顯著提升了用戶體驗和互動性。如果你對如何在網頁上展示地理數據感興趣，這無疑是一個非常有價值的參考！

👤 作者#

KKCAT