菜鳥日記Day 5－在地圖上增加標記(marker) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 5

0

Modern Web

JavaScript 菜鳥研究室系列第 5 篇

菜鳥日記Day 5－在地圖上增加標記(marker)

12th鐵人賽

2020-09-19 22:46:22

795 瀏覽

分享至

在加入Leaflet地圖元件後，我們還可以在地圖上製作標記(marker)及註釋

增加複數標籤的方式如下

設定變數名稱，如let = Alisan
設定標籤座標([23.505610, 120.789476])並將其加入地圖變數中.addTo(map)
指定變數標籤，並在裡面加入文字內容
以HTML標籤語法設定文字樣式如粗體的及段落文字

若想在標籤(marker)以外的地方增加文字敘述，則能夠使用以下語法

設定變數名稱let popup(彈跳訊息)
設定彈跳訊息的顯示座標.setLatLng([23.505610, 120.789476])
設定彈跳訊息的文字內容.setContent("我是獨立訊息")
設定彈跳訊息的開啟位置

菜鳥日記Day 4－載入Leaflet地圖套件

菜鳥日記Day 6－在地圖上增加圓圈與多邊形標示

系列文

JavaScript 菜鳥研究室共 30 篇

目錄

RSS系列文訂閱系列文

7 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙