線條的彈跳視窗
此範例示範如何在地圖上實現線條 Feature 的彈跳視窗，包含以下功能：
- 點擊並建立彈跳視窗：使用
map.addListener("click", callback)監聽點擊事件，並使用mapPlus.InfoWindow建立彈跳視窗，顯示 Feature 的屬性資訊
<!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>
<!-- mapPlus 地圖容器 -->
<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.539489, lat: 25.043539 },
zoom: 13.7,
});
// 將藍色線條加入地圖
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.519633, lat: 25.045716 },
{ lng: 121.535425, lat: 25.041954 },
{ lng: 121.543594, lat: 25.041654 },
{ lng: 121.557682, lat: 25.041332 },
]),
properties: {
strokeWeight: 25,
strokeColor: "#20D0E4",
id: 1,
name: "Bannan Line",
},
});
// 將黃色線條加入地圖
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.533018, lat: 25.051893 },
{ lng: 121.532708, lat: 25.033877 },
]),
properties: {
strokeWeight: 25,
strokeColor: "#F0E68C",
id: 2,
name: "Zhonghe-Xinlu Line",
},
});
// 將棕色線條加入地圖
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.544062, lat: 25.051843 },
{ lng: 121.543635, lat: 25.03336 },
]),
properties: {
strokeWeight: 25,
strokeColor: "#DEB887",
id: 3,
name: "Wenhu Line",
},
});
/* ══════════════════════════════════════════════════════════════════════════
* 點擊並建立彈跳視窗：
- 可調整 content 來變更視窗文字內容。
══════════════════════════════════════════════════════════════════════════ */
map.addListener("click", (feature) => {
const {
geometry: { lngLat },
properties: { id, name },
} = feature;
new mapPlus.InfoWindow({
position: lngLat,
content: "ID：" + id + "<br>說明：" + name,
animation: mapPlus.Animation.GROW,
}).open();
});
</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.539489, lat: 25.043539 },
zoom: 13.7,
});
// 將藍色線條加入地圖
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.519633, lat: 25.045716 },
{ lng: 121.535425, lat: 25.041954 },
{ lng: 121.543594, lat: 25.041654 },
{ lng: 121.557682, lat: 25.041332 },
]),
properties: {
strokeWeight: 25,
strokeColor: "#20D0E4",
id: 1,
name: "Bannan Line",
},
});
// 將黃色線條加入地圖
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.533018, lat: 25.051893 },
{ lng: 121.532708, lat: 25.033877 },
]),
properties: {
strokeWeight: 25,
strokeColor: "#F0E68C",
id: 2,
name: "Zhonghe-Xinlu Line",
},
});
// 將棕色線條加入地圖
map.data.add({
geometry: new mapPlus.Data.LineString([
{ lng: 121.544062, lat: 25.051843 },
{ lng: 121.543635, lat: 25.03336 },
]),
properties: {
strokeWeight: 25,
strokeColor: "#DEB887",
id: 3,
name: "Wenhu Line",
},
});
/* ══════════════════════════════════════════════════════════════════════════
* 點擊並建立彈跳視窗：
- 可調整 content 來變更視窗文字內容。
══════════════════════════════════════════════════════════════════════════ */
map.addListener("click", (feature) => {
const {
geometry: { lngLat },
properties: { id, name },
} = feature;
new mapPlus.InfoWindow({
position: lngLat,
content: "ID：" + id + "<br>說明：" + name,
animation: mapPlus.Animation.GROW,
}).open();
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>