介紹

調用 new mapPlus.Marker(options)，開始使用地圖地標API。

調用 new mapPlus.Marker(options)，開始使用地圖地標 API。

  • options (object): 必填，地標的參數。

    參數描述
    options.position object必填，經緯度座標
    options.icon string object HTMLElement選填，可設定簡易 URL，或是詳細設定 Marker 參數，又或是使用 HTMLElement 完全客製化 Marker，以下進行詳細說明。未填則為 mapPlus 預設 Marker。
    options.label string object選填，地標 icon 上顯示的文字。
    options.className string選填，可添加地標的 className。
    options.anchor string選填，設定錨點，可設定為 top、top-left、top-right、bottom、bottom-left、bottom-right、left、right、center，預設為 center。
    options.scale number選填，設定縮放比例，預設為 1。
    options.rotation number選填，設定旋轉角度，預設為 0。
    options.rotationAlignment string選填，旋轉角對齊，可設定為 auto 與視角對，或是 map 與地圖對齊，預設為 auto。
    options.pitchAlignment string選填，傾角對齊，可設定為 auto 與視角對齊，或是 map 與地圖對齊，預設為 auto。
    options.draggable boolean選填，設定地標是否可被拖曳，預設為 false。
    options.clickable boolean選填，設定地標是否可被點選，預設為 true。注意：若設定為 false，地標將無法進行拖曳以及觸發任何點擊事件。
    options.altitude number選填，地標的海拔高度，單位為公尺，預設為 0。
    options.title string選填，滑鼠移至地標上時，會顯示的工具提示。
    options.animation object選填，可添加地標的動畫，可套用 mapPlus.Animation.BOUNCE 或是 mapPlus.Animation.DROP。※ 注意：若有設定 rotation、rotationAlignment、pitchAlignment 屬性，會與動畫功能衝突。

範例

js
new mapPlus.Marker({  position: [ 121.52212916930945 , 25.027326932236182 ],});

圖示

基本使用

可設定簡易 URL，或是詳細設定 Marker 參數，又或是使用 HTMLElement 完全客製化 Marker。未填則為 mapPlus 預設 Marker。

  1. 圖片 URL（左一）: 可僅設定 URL。

  2. 圖片 URL 與設定（左二）:

  • url：Marker icon 的 url。
  • size：可設定 width 與 height。
  1. 使用 SVG（右二）:
  1. 使用 HTML Element（右一）: 可帶入 HTMLElement，完全客製化 Marker 樣式。

範例

js
// 圖片 URL（左一）new mapPlus.Marker({  position: [121.51912916930945, 25.027326932236182],  icon: 'https://kw3dmap.localking.com.tw/favicon.ico',});
// 圖片 URL 與設定（左二）new mapPlus.Marker({  position: [121.52112916930945, 25.027326932236182],  icon: {    url: 'https://kw3dmap.localking.com.tw/favicon.ico',    size: {      width: 30,      height: 50,    },  },  anchor: 'center',});
// 使用 SVG（右二）new mapPlus.Marker({  position: [121.52312916930945, 25.027326932236182],  icon: {    path: 'M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192z',    fillColor: '#FF0000',    fillOpacity: .8,    strokeWidth: 30,    strokeColor: '#0000FF',    strokeOpacity: .8,  },  rotation: 0,  scale: .1,  anchor: 'bottom',});
// 使用 HTML Element（右一）const element = document.createElement('div');element.style.background = '#00FF00';element.style.width = '40px';element.style.height = '40px';
new mapPlus.Marker({  position: [121.52512916930945, 25.027326932236182],  icon: element,});

進階使用

若需要高度客製化地標樣式，則會建議帶入 HTMLElement。

範例

html
<div id="map"></div>
<style>  .custom-marker > div {    display: flex;    align-items: center;    justify-content: center;    width: 60px;    height: 60px;    border-radius: 50%;    background: #FFFFFF;    border: 2px solid #74C0FC;    transition-duration: 500ms;  }  .custom-marker > div > svg {    fill: #74C0FC;    width: 36px;    height: 36px;    transition-duration: 500ms;  }  .marker-active > div {    border-color: #63E6BE;    transform: scaleX( -1 );  }  .marker-active > div > svg {    fill: #63E6BE;  }</style>
<script type="module">  const map = await new mapPlus( document.getElementById( 'map' ) , {    accessKey: 'get_your_key',    accessToken: 'get_your_token',    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',    center: [ 121.53559860212545 , 25.029308142529132 ],    zoom: 17,  });
  const markerElement = document.createElement( 'div' );
  const svg = document.createElementNS( 'http://www.w3.org/2000/svg' , 'svg' );  svg.setAttribute( 'xmlns' , 'http://www.w3.org/2000/svg' );  svg.setAttribute( 'viewBox' , '0 0 512 512' );  markerElement.appendChild( svg );
  const path = document.createElementNS( 'http://www.w3.org/2000/svg' , 'path' );  path.setAttribute( 'd' , 'M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z' );  svg.appendChild( path );
  const marker = new mapPlus.Marker({    position: [ 121.53559860212545 , 25.029308142529132 ],
    // 客製化 className，使用 CSS 控制樣式    className: 'custom-marker',
    // 添加客製化 Marker Element    icon: markerElement,  });
  setInterval( () => {    marker.toggleClassName( 'marker-active' );  } , 2000 );</script>

標籤

設定地標 icon 上顯示的文字。

  1. 簡易設定（左）: 可僅設定文字。

  2. 詳細設定（右）:

範例

js
// 簡易設定（左）new mapPlus.Marker({  position: [121.52012916930945, 25.027326932236182],  label: 'A',});
// 詳細設定（右）new mapPlus.Marker({  position: [121.52412916930945, 25.027326932236182],  label: {    text: 'B',    color: '#ff0000',    fontWeight: 'bold',  },});

海拔高度

設定地標的海拔高度。

範例

js
const LAT = 25.027326932236182;
// 海拔 0 公尺（左）new mapPlus.Marker({  position: [121.51912916930945, LAT],  altitude: 0,});
// 海拔 100 公尺（中）new mapPlus.Marker({  position: [121.52212916930945, LAT],  altitude: 100,});
// 海拔 200 公尺（右）new mapPlus.Marker({  position: [121.52512916930945, LAT],  altitude: 200,});

動畫

可添加地標的動畫，可套用 mapPlus.Animation.BOUNCE 或是 mapPlus.Animation.DROP。

範例

js
// 動畫 BOUNCE（左）const bounceMarker = new mapPlus.Marker({  position: [121.52012916930945, 25.027326932236182],  animation: mapPlus.Animation.BOUNCE,});
// 動畫 DROP（右）const dropMarker = new mapPlus.Marker({  position: [121.52412916930945, 25.027326932236182],});
// 重置 DROP 動畫function resetDropAnimation() {  dropMarker.setAnimation(mapPlus.Animation.DROP);  setTimeout( () => {    dropMarker.setAnimation(null);  }, 2000);}
setInterval(() => {  resetDropAnimation();}, 3000);