介紹
調用 new mapPlus.Marker(options)，開始使用地圖地標 API。
-
options
(object): 必填，地標的參數。參數 描述 options.position object必填，經緯度座標 options.icon stringobjectHTMLElement選填，可設定簡易 URL，或是詳細設定 Marker 參數，又或是使用 HTMLElement完全客製化 Marker，以下進行詳細說明。未填則為 mapPlus 預設 Marker。options.label stringobject選填，地標 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屬性，會與動畫功能衝突。
範例
new mapPlus.Marker({
position: [ 121.52212916930945 , 25.027326932236182 ],
});
圖示
基本使用
可設定簡易 URL，或是詳細設定 Marker 參數，又或是使用 HTMLElement 完全客製化 Marker。未填則為 mapPlus 預設 Marker。
-
圖片 URL（左一）: 可僅設定 URL。
-
圖片 URL 與設定（左二）:
url：Marker icon 的url。size：可設定width與height。
- 使用 SVG（右二）:
path: 設定 SVG Path。- 樣式設定: 使用 SVG Style Property 設定 Marker 樣式。
- 使用 HTML Element（右一）: 可帶入
HTMLElement，完全客製化 Marker 樣式。
範例
// 圖片 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。
範例
<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 上顯示的文字。
-
簡易設定（左）: 可僅設定文字。
-
詳細設定（右）:
text: 設定文字內容。- 樣式設定: 使用 HTMLElement Style Property 設定 label 樣式。
範例
// 簡易設定（左）
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',
},
});
海拔高度
設定地標的海拔高度。
範例
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。
範例
// 動畫 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);