演示 McDonald 官網的彈窗
此範例示範如何在地圖上顯示多個 McDonald 據點，包含以下功能：
- 加入客製化地標並建立彈窗：以 McDonald 的 SVG base64 作為 marker 圖示，使用
InfoWindow建立彈窗顯示 McDonald 店名與地址
info
詳細使用參數說明請參考「地標」。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>演示McDonald官網的彈跳視窗</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: [121.51982430755764, 25.048205742316262], // 地圖中心點
pitch: 0, // 視角傾斜角度, 0~85
bearing: 0, // 視角旋轉角度, 0~360
zoom: 13, // 縮放級別
maxZoom: 18, // 最大縮放級別
minZoom: 7, // 最小縮放級別
});
/* ══════════════════════════════════════════════════════════════════════════
- 加入 McDonald 地標並建立彈窗：
- 調整 mcDonaldIcon 的字串值可更換為其他 base64 SVG 地標圖案。
- 調整 title 可設置訊息視窗的地標店名顯示。
- 調整 location 可設置訊息視窗的地標地址顯示。
- 調整 coordinates 可設置地標的經緯度座標。
══════════════════════════════════════════════════════════════════════════ */
// 地標 icon 來源
const mcDonaldIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDgiIGhlaWdodD0iMTI4IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTA4IDEyOCI+PHBhdGggZmlsbD0iI0M0MDAwNSIgZD0iTTkxLjgwOCAxNS43NDVjMjEuMDAyIDIwLjk5NCAyMS4wMDIgNTUuMDMgMCA3Ni4wMjRMNTYuODIyIDEyNi43NGE0LjMwMyA0LjMwMyAwIDAgMS02LjA4NCAwTDE1Ljc1MiA5MS43N2MtMjEuMDAzLTIwLjk5NC0yMS4wMDMtNTUuMDMxIDAtNzYuMDI1IDIxLjAwMi0yMC45OTMgNTUuMDU0LTIwLjk5MyA3Ni4wNTYgMFoiLz48cGF0aCBmaWxsPSIjRkMwIiBkPSJNNjguODMgMjIuOTQyYzYuMDE4IDAgMTAuODk5IDI1LjQ3MiAxMC44OTkgNTYuOTNoOC43ODFjMC0zMy44NjgtOC44NTktNjEuMjgzLTE5LjcwNi02MS4yODMtNi4xOTkgMC0xMS42NzQgOC4yMTQtMTUuMjkgMjEuMTE4QzQ5LjkgMjYuODAzIDQ0LjQyNCAxOC41OSAzOC4yNzYgMTguNTljLTEwLjg0NyAwLTE5LjY4IDI3LjM5LTE5LjY4IDYxLjI1N2g4Ljc4MmMwLTMxLjQ1OCA0LjgzLTU2LjkwNCAxMC44NDctNTYuOTA0IDYuMDE3IDAgMTAuODk5IDIzLjUyOSAxMC44OTkgNTIuNTVoOC43M2MwLTI5LjAyMiA0LjkwNy01Mi41NSAxMC45MjQtNTIuNTUiLz48L3N2Zz4="
// 地標清單
const mcDonaldList = [
{
// 地標店名與地址，將傳入訊息視窗中做為訊息內容的顯示
title: "台北承德餐廳",
location: "103台北市大同區承德路一段34號1樓",
// 地標的經緯度座標
coordinates: [121.51673619120999, 25.051163278902497],
},
{
title: "台北公園餐廳",
location: "100台北市中正區公園路30-1號",
coordinates: [121.51683369483514, 25.044902626729968],
},
{
title: "林森二餐廳",
location: "100台北市中正區林森南路1號",
coordinates: [121.52343221722336, 25.044752212110357],
},
];
mcDonaldList.forEach(({ title, location, coordinates }) => {
const marker = new mapPlus.Marker({
icon: {
url: mcDonaldIcon,
anchor: "bottom",
},
position: coordinates,
});
const infoWindow = new mapPlus.InfoWindow({
closeOnClick: true,
closeButton: false,
position: coordinates,
content: title + "<br>" + location,
});
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.51982430755764, 25.048205742316262], // 地圖中心點
pitch: 0, // 視角傾斜角度, 0~85
bearing: 0, // 視角旋轉角度, 0~360
zoom: 13, // 縮放級別
maxZoom: 18, // 最大縮放級別
minZoom: 7, // 最小縮放級別
});
/* ══════════════════════════════════════════════════════════════════════════
- 加入 McDonald 地標並建立彈窗：
- 調整 mcDonaldIcon 的字串值可更換為其他 base64 SVG 地標圖案。
- 調整 title 可設置訊息視窗的地標店名顯示。
- 調整 location 可設置訊息視窗的地標地址顯示。
- 調整 coordinates 可設置地標的經緯度座標。
══════════════════════════════════════════════════════════════════════════ */
// 地標 icon 來源
const mcDonaldIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDgiIGhlaWdodD0iMTI4IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTA4IDEyOCI+PHBhdGggZmlsbD0iI0M0MDAwNSIgZD0iTTkxLjgwOCAxNS43NDVjMjEuMDAyIDIwLjk5NCAyMS4wMDIgNTUuMDMgMCA3Ni4wMjRMNTYuODIyIDEyNi43NGE0LjMwMyA0LjMwMyAwIDAgMS02LjA4NCAwTDE1Ljc1MiA5MS43N2MtMjEuMDAzLTIwLjk5NC0yMS4wMDMtNTUuMDMxIDAtNzYuMDI1IDIxLjAwMi0yMC45OTMgNTUuMDU0LTIwLjk5MyA3Ni4wNTYgMFoiLz48cGF0aCBmaWxsPSIjRkMwIiBkPSJNNjguODMgMjIuOTQyYzYuMDE4IDAgMTAuODk5IDI1LjQ3MiAxMC44OTkgNTYuOTNoOC43ODFjMC0zMy44NjgtOC44NTktNjEuMjgzLTE5LjcwNi02MS4yODMtNi4xOTkgMC0xMS42NzQgOC4yMTQtMTUuMjkgMjEuMTE4QzQ5LjkgMjYuODAzIDQ0LjQyNCAxOC41OSAzOC4yNzYgMTguNTljLTEwLjg0NyAwLTE5LjY4IDI3LjM5LTE5LjY4IDYxLjI1N2g4Ljc4MmMwLTMxLjQ1OCA0LjgzLTU2LjkwNCAxMC44NDctNTYuOTA0IDYuMDE3IDAgMTAuODk5IDIzLjUyOSAxMC44OTkgNTIuNTVoOC43M2MwLTI5LjAyMiA0LjkwNy01Mi41NSAxMC45MjQtNTIuNTUiLz48L3N2Zz4="
// 地標清單
const mcDonaldList = [
{
// 地標店名與地址，將傳入訊息視窗中做為訊息內容的顯示
title: "台北承德餐廳",
location: "103台北市大同區承德路一段34號1樓",
// 地標的經緯度座標
coordinates: [121.51673619120999, 25.051163278902497],
},
{
title: "台北公園餐廳",
location: "100台北市中正區公園路30-1號",
coordinates: [121.51683369483514, 25.044902626729968],
},
{
title: "林森二餐廳",
location: "100台北市中正區林森南路1號",
coordinates: [121.52343221722336, 25.044752212110357],
},
];
mcDonaldList.forEach(({ title, location, coordinates }) => {
const marker = new mapPlus.Marker({
icon: {
url: mcDonaldIcon,
anchor: "bottom",
},
position: coordinates,
});
const infoWindow = new mapPlus.InfoWindow({
closeOnClick: true,
closeButton: false,
position: coordinates,
content: title + "<br>" + location,
});
marker.addListener("click", () => {
infoWindow.open({
// 讓訊息視窗可顯示在對應的地標上
anchor: marker,
});
});
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>