圓形的互動效果
此範例示範如何在地圖上實現圓形 Feature 的互動效果，包含以下功能：
- 覆蓋樣式：使用
map.addListener("mouseover")監聽滑鼠移入事件，並使用map.data.overrideStyle()方法覆蓋圓形外框寬度、外框顏色與填色 - 還原樣式：使用
map.addListener("mouseout")監聽滑鼠移出事件，並使用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; }
</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.5227224646543, lat: 25.02701676669362 },
zoom: 15.8,
});
// 將左上圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.518793,
lat: 25.027923,
radius: 80,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 0,
},
});
// 將左下圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.520326,
lat: 25.025145,
radius: 70,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 1,
},
});
// 將中間圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.522127,
lat: 25.026536,
radius: 60,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 2,
},
});
// 將右上圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.524411,
lat: 25.02805,
radius: 75,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 3,
},
});
// 將右下圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.526622,
lat: 25.025525,
radius: 120,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 4,
},
});
/* ══════════════════════════════════════════════════════════════════════════
* 覆蓋樣式：
- 可調整 strokeWeight 來更換圓形外框寬度。
- 可調整 fillColor 來更換圓形填色。
- 可調整 strokeColor 來更換圓形外框顏色。
══════════════════════════════════════════════════════════════════════════ */
// 當鼠標懸停在圓形上
map.addListener("mouseover", (feature) => {
// 覆蓋樣式
map.data.overrideStyle(feature, {
// 外框寬度
strokeWeight: 10,
// 填色
fillColor: "#FF6347",
// 外框顏色
strokeColor: "#DC143C",
});
});
/* ══════════════════════════════════════════════════════════════════════════
* 移除覆蓋樣式
══════════════════════════════════════════════════════════════════════════ */
// 當鼠標離開圓形
map.addListener("mouseout", () => {
// 移除所覆蓋的樣式
map.data.revertStyle();
});
</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.5227224646543, lat: 25.02701676669362 },
zoom: 15.8,
});
// 將左上圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.518793,
lat: 25.027923,
radius: 80,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 0,
},
});
// 將左下圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.520326,
lat: 25.025145,
radius: 70,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 1,
},
});
// 將中間圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.522127,
lat: 25.026536,
radius: 60,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 2,
},
});
// 將右上圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.524411,
lat: 25.02805,
radius: 75,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 3,
},
});
// 將右下圓形加進資料層
map.data.add({
geometry: new mapPlus.Data.Circle({
lng: 121.526622,
lat: 25.025525,
radius: 120,
}),
properties: {
strokeWeight: 5,
fillColor: "#F0E68C",
strokeColor: "#DAA520",
fillOpacity: 1,
id: 4,
},
});
/* ══════════════════════════════════════════════════════════════════════════
* 覆蓋樣式：
- 可調整 strokeWeight 來更換圓形外框寬度。
- 可調整 fillColor 來更換圓形填色。
- 可調整 strokeColor 來更換圓形外框顏色。
══════════════════════════════════════════════════════════════════════════ */
// 當鼠標懸停在圓形上
map.addListener("mouseover", (feature) => {
// 覆蓋樣式
map.data.overrideStyle(feature, {
// 外框寬度
strokeWeight: 10,
// 填色
fillColor: "#FF6347",
// 外框顏色
strokeColor: "#DC143C",
});
});
/* ══════════════════════════════════════════════════════════════════════════
* 移除覆蓋樣式
══════════════════════════════════════════════════════════════════════════ */
// 當鼠標離開圓形
map.addListener("mouseout", () => {
// 移除所覆蓋的樣式
map.data.revertStyle();
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>