今天來介紹如何使用popup和tooltips

添加popup到地圖中

現在我們來添加一個簡單popup

const popup = new mapboxgl.Popup({ offset: 25 })
.setHTML('<h1>Hello World!</h1>')// 或者是使用setText()
.setLngLat([121.5654, 25.0330])
.addTo(map);

mapbox可以單純使用座標來定位popup出現的位置，也可以綁定在marker上

const marker = new mapboxgl.Marker()
  .setLngLat([121.5654, 25.0330]) // 設定標記的位置
  .addTo(map);
const popup = new mapboxgl.Popup()
.setHTML('<h1>Hello World!</h1>'
// .setLngLat([121.5654, 25.0330])
.addTo(map);
marker.setPopup(popup);

popup參數設定

1.anchor

設定Popup的點，決定Popup應該出現在經緯度點的哪個方位。
可選值：'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'。
這些選項決定Popup應該相對於其座標點顯示在哪一側，如果不設置，Mapbox會自動選擇一個合適的方向，默認是 'bottom'。

const popup = new mapboxgl.Popup({ anchor: 'right' })
  .setLngLat([121.5654, 25.0330]) 
  .setText('這是台北 101')
  .addTo(map);

2.closeButton

決定是否在Popup右上角顯示關閉按鈕，默認值為true。
如果設置為true，則在Popup中會出現一個關閉按鈕，允許用戶手動關閉Popup。

const popup = new mapboxgl.Popup({ closeButton: false })
  .setLngLat([121.5654, 25.0330])
  .setText('這個 Popup 沒有關閉按鈕')
  .addTo(map);

3.closeOnClick

設置是否在點擊地圖時關閉Popup，默認值為true
如果設置為 true，當使用者在地圖上任意位置點擊時，Popup 會自動關閉。

const popup = new mapboxgl.Popup({ closeOnClick: false })
  .setLngLat([121.5654, 25.0330])
  .setText('點擊地圖時，這個 Popup 不會關閉')
  .addTo(map);

4.closeOnMove

設置當地圖移動時是否自動關閉Popup，默認值為false。
當地圖平移或縮放時，Popup會自動關閉。如果需要地圖移動時仍保留Popup，則設置為false。

const popup = new mapboxgl.Popup({ closeOnMove: true })
  .setLngLat([121.5654, 25.0330])
  .setText('當地圖移動時，這個 Popup 會關閉')
  .addTo(map);

5.focusAfterOpen

設置是否在打開Popup後自動聚焦到第一個可聚焦的元素。
當Popup打開時，會自動聚焦到Popup內的第一個可聚焦的元素，這對於無障礙設計很有幫助。

const popup = new mapboxgl.Popup({ focusAfterOpen: false })
  .setLngLat([121.5654, 25.0330])
  .setText('打開時不會自動聚焦')
  .addTo(map);

6.offset

為Popup的位置應用像素偏移。
number, PointLike 或 Object。
你可以設置Popup相對於錨點的偏移量。這可以是單一數值或list，也可以是對每個錨點位置進行單獨設置的偏移量。

const popup = new mapboxgl.Popup({ offset: 25 })
  .setLngLat([121.5654, 25.0330])
  .setText('這個 Popup 有 25px 的偏移')
  .addTo(map);

或

const popup = new mapboxgl.Popup({ offset: [50, 20] })
  .setLngLat([121.5654, 25.0330])
  .setText('這個 Popup 水平方向偏移 50px，垂直方向偏移 20px')
  .addTo(map);