座標點的互動效果
此範例示範如何在地圖上實現座標點 Feature 的互動效果，包含以下功能：
- 懸浮文字效果：搭配 HTML Element 做出跟隨鼠標的懸浮文字效果
- 覆蓋樣式：使用
map.data.overrideStyle()覆蓋原有文字大小及顏色與滑鼠游標樣式。 - 移除覆蓋樣式：使用
map.data.revertStyle()移除所覆蓋的樣式。
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; }
.hover-text {
position: absolute;
z-index: 9999;
pointer-events: none;
background-color: white;
border: 1px solid black;
padding: 5px;
display: none;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="hoverText" class="hover-text"></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.52048832858763,
lat: 25.025126634176872,
}),
properties: {
textField: "Size12",
textSize: 12,
title: "point1",
id: 1,
},
});
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52225776991352,
lat: 25.026686419244356,
}),
properties: {
textField: "Size15",
textSize: 15,
title: "point2",
id: 2,
},
});
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.5260511577948,
lat: 25.025200947748637,
}),
properties: {
textField: "Size20",
textSize: 20,
title: "point3",
id: 3,
},
});
/* ══════════════════════════════════════════════════════════════════════════
* 懸浮文字效果
══════════════════════════════════════════════════════════════════════════ */
// 取得 HTML 中 id 為 hoverText 的元素
const hoverText = document.getElementById("hoverText");
// 新增鼠標移動監聽事件，當鼠標在座標點上移動，則顯示屬性 title 的內容
map.addListener("mousemove", function (feature) {
const { title, clientX, clientY } = feature.properties;
if (title) {
// 更新顯示文字的位置
hoverText.style.left = clientX + "px";
hoverText.style.top = clientY + "px";
// 更新顯示的文字內容
hoverText.textContent = title;
// 顯示元素
hoverText.style.display = "block";
}
});
/* ══════════════════════════════════════════════════════════════════════════
* 覆蓋樣式：
- 可調整 textSize 來更換文字大小。
- 可調整 textColor 來更換文字顏色。
══════════════════════════════════════════════════════════════════════════ */
// 當鼠標懸停在座標點上
map.addListener("mouseover", (feature) => {
const override_size = feature.getProperty("textSize") + 5;
// 覆蓋樣式
map.data.overrideStyle(feature, {
textSize: override_size,
textColor: "#009fa8",
});
});
/* ══════════════════════════════════════════════════════════════════════════
* 移除覆蓋樣式
══════════════════════════════════════════════════════════════════════════ */
// 當鼠標離開座標點
map.addListener("mouseout", function (e) {
// 移除所覆蓋的樣式
map.data.revertStyle();
// 滑鼠游標離開座標點時隱藏元素
hoverText.style.display = "none";
});
</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.52048832858763,
lat: 25.025126634176872,
}),
properties: {
textField: "Size12",
textSize: 12,
title: "point1",
id: 1,
},
});
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.52225776991352,
lat: 25.026686419244356,
}),
properties: {
textField: "Size15",
textSize: 15,
title: "point2",
id: 2,
},
});
map.data.add({
geometry: new mapPlus.Data.Point({
lng: 121.5260511577948,
lat: 25.025200947748637,
}),
properties: {
textField: "Size20",
textSize: 20,
title: "point3",
id: 3,
},
});
/* ══════════════════════════════════════════════════════════════════════════
* 懸浮文字效果
══════════════════════════════════════════════════════════════════════════ */
// 取得 HTML 中 id 為 hoverText 的元素
const hoverText = document.getElementById("hoverText");
// 新增鼠標移動監聽事件，當鼠標在座標點上移動，則顯示屬性 title 的內容
map.addListener("mousemove", function (feature) {
const { title, clientX, clientY } = feature.properties;
if (title) {
// 更新顯示文字的位置
hoverText.style.left = clientX + "px";
hoverText.style.top = clientY + "px";
// 更新顯示的文字內容
hoverText.textContent = title;
// 顯示元素
hoverText.style.display = "block";
}
});
/* ══════════════════════════════════════════════════════════════════════════
* 覆蓋樣式：
- 可調整 textSize 來更換文字大小。
- 可調整 textColor 來更換文字顏色。
══════════════════════════════════════════════════════════════════════════ */
// 當鼠標懸停在座標點上
map.addListener("mouseover", (feature) => {
const override_size = feature.getProperty("textSize") + 5;
// 覆蓋樣式
map.data.overrideStyle(feature, {
textSize: override_size,
textColor: "#009fa8",
});
});
/* ══════════════════════════════════════════════════════════════════════════
* 移除覆蓋樣式
══════════════════════════════════════════════════════════════════════════ */
// 當鼠標離開座標點
map.addListener("mouseout", function (e) {
// 移除所覆蓋的樣式
map.data.revertStyle();
// 滑鼠游標離開座標點時隱藏元素
hoverText.style.display = "none";
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
.hover-text {
position: absolute;
z-index: 9999;
pointer-events: none;
background-color: white;
border: 1px solid black;
padding: 5px;
display: none;
}
</style>