座標點的點擊事件
此範例示範如何在地圖上實現座標點 Feature 的點擊事件，包含以下功能：
- 加入點擊事件並變更樣式：使用
map.addListener("click", callback)監聽點擊事件，並使用map.data.setStyle()動態變更 icon 圖示和大小 - 設定不可點擊：使用
map.data.setStyle()設定特定 Feature 點是否可點擊
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; }
</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: { lng: 121.52424082, lat: 25.0265365823 },
zoom: 15.8,
});
// 將座標點加入資料層
map.data.add({
// 接收內容包含經緯度的物件
geometry: new mapPlus.Data.Point({
lng: 121.52055832858763,
lat: 25.025126634176872,
}),
properties: {
textField: "Size12",
textSize: 12,
id: 1,
},
});
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52225776991352,
lat: 25.026686419244356,
}),
properties: {
textField: "Size15",
textSize: 15,
id: 2,
},
});
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.5260511577948,
lat: 25.025200947748637,
}),
properties: {
textField: "Size20",
textSize: 20,
id: 3,
},
});
// 載入自訂圖片作為 icon
map.loadImage({
png: "https://kw3dmap.localking.com.tw/3dmap/img/kingway.png",
imageName: "newImage", // 設定圖片名稱
});
/* ══════════════════════════════════════════════════════════════════════════
* 加入點擊事件並動態變更樣式。
══════════════════════════════════════════════════════════════════════════ */
map.addListener("click", function (feature) {
map.data.setStyle((f) => {
if (f.getProperty("id") !== feature.getProperty("id")) return;
// 更換為 icon 的預設樣式
if (f.getProperty("icon") === "newImage")
return {
// black_location 為 icon 的預設樣式
icon: "black_location",
iconSize: 1
};
else return {
// 更換為新的 icon 樣式
icon: "newImage",
iconSize: 0.1
};
});
});
/* ══════════════════════════════════════════════════════════════════════════
* 設定不可點擊：
- 可更換其他條件來設置座標點為不可點擊。
══════════════════════════════════════════════════════════════════════════ */
map.data.setStyle((feature) => {
// 將 textSize 小於 15px 的座標點設為不可點擊
const setClickable = feature.getProperty("textSize") < 15 ? false : true;
// 將 textSize 小於 20px 的座標點設為不可點擊
// const setClickable = feature.getProperty("textSize") < 20 ? false : true;
return { clickable: setClickable };
});
</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: { lng: 121.52424082, lat: 25.0265365823 },
zoom: 15.8,
});
// 將座標點加入資料層
map.data.add({
// 接收內容包含經緯度的物件
geometry: new mapPlus.Data.Point({
lng: 121.52055832858763,
lat: 25.025126634176872,
}),
properties: {
textField: "Size12",
textSize: 12,
id: 1,
},
});
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52225776991352,
lat: 25.026686419244356,
}),
properties: {
textField: "Size15",
textSize: 15,
id: 2,
},
});
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.5260511577948,
lat: 25.025200947748637,
}),
properties: {
textField: "Size20",
textSize: 20,
id: 3,
},
});
// 載入自訂圖片作為 icon
map.loadImage({
png: "https://kw3dmap.localking.com.tw/3dmap/img/kingway.png",
imageName: "newImage", // 設定圖片名稱
});
/* ══════════════════════════════════════════════════════════════════════════
* 加入點擊事件並動態變更樣式。
══════════════════════════════════════════════════════════════════════════ */
map.addListener("click", function (feature) {
map.data.setStyle((f) => {
if (f.getProperty("id") !== feature.getProperty("id")) return;
// 更換為 icon 的預設樣式
if (f.getProperty("icon") === "newImage")
return {
// black_location 為 icon 的預設樣式
icon: "black_location",
iconSize: 1
};
else return {
// 更換為新的 icon 樣式
icon: "newImage",
iconSize: 0.1
};
});
});
/* ══════════════════════════════════════════════════════════════════════════
* 設定不可點擊：
- 可更換其他條件來設置座標點為不可點擊。
══════════════════════════════════════════════════════════════════════════ */
map.data.setStyle((feature) => {
// 將 textSize 小於 15px 的座標點設為不可點擊
const setClickable = feature.getProperty("textSize") < 15 ? false : true;
// 將 textSize 小於 20px 的座標點設為不可點擊
// const setClickable = feature.getProperty("textSize") < 20 ? false : true;
return { clickable: setClickable };
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>