建立多個客製化地標
此範例示範如何建立客製化地標，包含以下功能：
- 建立自訂圖示地標：使用 base64 SVG 作為 marker icon，並設定不同尺寸
- 點擊顯示訊息視窗：綁定
click事件開啟對應InfoWindow
info
詳細使用參數說明請參考「地標」。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>客製化地標</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
.customize-marker {
display: block;
border: none;
border-radius: 50%;
background-color: white;
opacity: 0.9;
cursor: pointer;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
const map = await new mapPlus(document.getElementById("map"), {
accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
center: [121.52198194409791, 25.026938258991594], // 地圖中心點
pitch: 0, // 視角傾斜角度, 0~85
bearing: 0, // 視角旋轉角度, 0~360
zoom: 16, // 縮放級別
maxZoom: 18, // 最大縮放級別
minZoom: 7, // 最小縮放級別
});
/* ══════════════════════════════════════════════════════════════════════════
* 建立自訂圖示地標：
- 調整 iconBase64 的字串值可更換為其他 base64 SVG 地標圖案。
- 調整 name 可設置訊息視窗的內容顯示。
- 調整 iconSize 可設置不同的地標尺寸。
- 調整 coordinates 可設置地標的經緯度座標。
══════════════════════════════════════════════════════════════════════════ */
// 地標 icon 來源
const iconBase64 = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iIzYzRTZCRSIgZD0iTTI1NiAwYzE3LjcgMCAzMiAxNC4zIDMyIDMyVjY2LjdDMzY4LjQgODAuMSA0MzEuOSAxNDMuNiA0NDUuMyAyMjRINDgwYzE3LjcgMCAzMiAxNC4zIDMyIDMycy0xNC4zIDMyLTMyIDMySDQ0NS4zQzQzMS45IDM2OC40IDM2OC40IDQzMS45IDI4OCA0NDUuM1Y0ODBjMCAxNy43LTE0LjMgMzItMzIgMzJzLTMyLTE0LjMtMzItMzJWNDQ1LjNDMTQzLjYgNDMxLjkgODAuMSAzNjguNCA2Ni43IDI4OEgzMmMtMTcuNyAwLTMyLTE0LjMtMzItMzJzMTQuMy0zMiAzMi0zMkg2Ni43QzgwLjEgMTQzLjYgMTQzLjYgODAuMSAyMjQgNjYuN1YzMmMwLTE3LjcgMTQuMy0zMiAzMi0zMnpNMTI4IDI1NmExMjggMTI4IDAgMSAwIDI1NiAwIDEyOCAxMjggMCAxIDAgLTI1NiAwem0xMjgtODBhODAgODAgMCAxIDEgMCAxNjAgODAgODAgMCAxIDEgMC0xNjB6Ii8+PC9zdmc+";
// 地標清單
const markerList = [
{
// 地標名稱，將傳入訊息視窗中做為訊息內容的顯示
name: "Name 01",
// 地標尺寸
iconSize: [60, 60],
// 地標的經緯度座標
coordinates: [121.52098194409791, 25.027438258991594]
},
{
name: "Name 02",
iconSize: [50, 50],
coordinates: [121.52056020039743, 25.026957948368633]
},
{
name: "Name 03",
iconSize: [40, 40],
coordinates: [121.52125665788321, 25.026179630813488]
},
{
name: "Name 04",
iconSize: [30, 30],
coordinates: [121.52325316934412, 25.026603849552558]
},
{
name: "Name 05",
iconSize: [30, 30],
coordinates: [121.52287398693443, 25.027571483502967]
},
];
/* ══════════════════════════════════════════════════════════════════════════
* 點擊顯示訊息視窗：綁定 click 事件開啟對應 InfoWindow。
══════════════════════════════════════════════════════════════════════════ */
map.on("style.load", () => {
markerList.map(({ name, coordinates, iconSize: [width, height] }) => {
const element = document.createElement("div");
element.className = "customize-marker";
element.style.backgroundImage = "url(" + iconBase64 + ")";
element.style.width = width + "px";
element.style.height = height + "px";
const infoWindow = new mapPlus.InfoWindow({
content: "<h5>" + name + "</h5>",
closeOnClick: true,
});
const marker = new mapPlus.Marker({
position: coordinates,
icon: element,
});
marker.addListener("click", () => {
infoWindow.open({
// 讓訊息視窗可顯示在對應的地標上
anchor: marker,
});
});
});
});
</script>
</body>
</html>
<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<script type="module">
const map = await new mapPlus(document.getElementById("map"), {
accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
center: [121.52198194409791, 25.026938258991594], // 地圖中心點
pitch: 0, // 視角傾斜角度, 0~85
bearing: 0, // 視角旋轉角度, 0~360
zoom: 16, // 縮放級別
maxZoom: 18, // 最大縮放級別
minZoom: 7, // 最小縮放級別
});
/* ══════════════════════════════════════════════════════════════════════════
* 建立自訂圖示地標：
- 調整 iconBase64 的字串值可更換為其他 base64 SVG 地標圖案。
- 調整 name 可設置訊息視窗的內容顯示。
- 調整 iconSize 可設置不同的地標尺寸。
- 調整 coordinates 可設置地標的經緯度座標。
══════════════════════════════════════════════════════════════════════════ */
// 地標 icon 來源
const iconBase64 = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZmlsbD0iIzYzRTZCRSIgZD0iTTI1NiAwYzE3LjcgMCAzMiAxNC4zIDMyIDMyVjY2LjdDMzY4LjQgODAuMSA0MzEuOSAxNDMuNiA0NDUuMyAyMjRINDgwYzE3LjcgMCAzMiAxNC4zIDMyIDMycy0xNC4zIDMyLTMyIDMySDQ0NS4zQzQzMS45IDM2OC40IDM2OC40IDQzMS45IDI4OCA0NDUuM1Y0ODBjMCAxNy43LTE0LjMgMzItMzIgMzJzLTMyLTE0LjMtMzItMzJWNDQ1LjNDMTQzLjYgNDMxLjkgODAuMSAzNjguNCA2Ni43IDI4OEgzMmMtMTcuNyAwLTMyLTE0LjMtMzItMzJzMTQuMy0zMiAzMi0zMkg2Ni43QzgwLjEgMTQzLjYgMTQzLjYgODAuMSAyMjQgNjYuN1YzMmMwLTE3LjcgMTQuMy0zMiAzMi0zMnpNMTI4IDI1NmExMjggMTI4IDAgMSAwIDI1NiAwIDEyOCAxMjggMCAxIDAgLTI1NiAwem0xMjgtODBhODAgODAgMCAxIDEgMCAxNjAgODAgODAgMCAxIDEgMC0xNjB6Ii8+PC9zdmc+";
// 地標清單
const markerList = [
{
// 地標名稱，將傳入訊息視窗中做為訊息內容的顯示
name: "Name 01",
// 地標尺寸
iconSize: [60, 60],
// 地標的經緯度座標
coordinates: [121.52098194409791, 25.027438258991594]
},
{
name: "Name 02",
iconSize: [50, 50],
coordinates: [121.52056020039743, 25.026957948368633]
},
{
name: "Name 03",
iconSize: [40, 40],
coordinates: [121.52125665788321, 25.026179630813488]
},
{
name: "Name 04",
iconSize: [30, 30],
coordinates: [121.52325316934412, 25.026603849552558]
},
{
name: "Name 05",
iconSize: [30, 30],
coordinates: [121.52287398693443, 25.027571483502967]
},
];
/* ══════════════════════════════════════════════════════════════════════════
* 點擊顯示訊息視窗：綁定 click 事件開啟對應 InfoWindow。
══════════════════════════════════════════════════════════════════════════ */
map.on("style.load", () => {
markerList.map(({ name, coordinates, iconSize: [width, height] }) => {
const element = document.createElement("div");
element.className = "customize-marker";
element.style.backgroundImage = "url(" + iconBase64 + ")";
element.style.width = width + "px";
element.style.height = height + "px";
const infoWindow = new mapPlus.InfoWindow({
content: "<h5>" + name + "</h5>",
closeOnClick: true,
});
const marker = new mapPlus.Marker({
position: coordinates,
icon: element,
});
marker.addListener("click", () => {
infoWindow.open({
// 讓訊息視窗可顯示在對應的地標上
anchor: marker,
});
});
});
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
.customize-marker {
display: block;
border: none;
border-radius: 50%;
background-color: white;
opacity: 0.9;
cursor: pointer;
padding: 0;
}
</style>