iT邦幫忙

0

(已解決)原生JS+CSS-該怎麼寫出互動台灣地圖?

  • 分享至 

  • xImage

我想要做的是:
在網頁中放上一個台灣地圖 以不同縣市分區為標準
效果是 當游標靠近 會顯示:"這是台北" "這是台南"

個人的幾種作法思考
1.用SVG來畫圖 不同縣市不同tag JS部分就監聽event來處理
2.一張完整圖 用canvas或img丟圖 然後監聽游標位置 當位置符合在台北->顯示在台北
3.其他

想知道若要完成我的需求 以上哪一種作法比較好 或者應該有更好的想法?
以及
是否會牽扯到 某種演算法或方法 能夠幫助完成的?

Felix iT邦研究生 2 級 ‧ 2022-06-16 05:32:13 檢舉
不用監聽吧,我記得 HTML 就有 map 可以使用。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
camabula
iT邦新手 2 級 ‧ 2022-06-16 14:46:07
最佳解答

在網頁中放上一個台灣地圖 以不同縣市分區為標準
效果是 當游標靠近 會顯示:"這是台北" "這是台南"

CodePen範例

大大好牛逼 雖然還不知道怎麼畫圖 不過先跪了Orz

0
Samuel
iT邦好手 1 級 ‧ 2022-06-16 07:48:19

可以嘗試站在巨人的肩膀上就好

使用leafletjs來做分店經緯度資訊可視化處裡
https://coolmandiary.blogspot.com/2022/03/leafletjs.html

leafletjs有提供API polygon的可以做多邊形的繪製
geoJson要先準備
https://www.oxxostudio.tw/articles/201803/google-maps-15-geojson-taiwan.html

感謝提供資訊!

我要發表回答

立即登入回答