多地圖標記切換訊息視窗

可同時於地圖上設置多個標記點,並於點擊標記點時顯示訊息視窗。

您也能使用以 Base64 編碼的圖片,例如:

markerEl.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAqCAYAAACgLjskAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjlJREFUeNrUl8FOwkAQhocVjAYJmBgveCDxBTTqwZN9A/EN8Amsid7x7EWfQHgC9A3grInwACZcuKiJEkI0ouBOnZJa2t2Bbk38k2VLd7ZfZ3d2Z5sYjUag0vbpc05WJVksKlmfSVeWOpXK3fnKq+p5iTAggcqyHMF0usR+YeBAoIQV8W0DvOEKvS5J6LW/QQTAbFnVIsCA+tbks0pKD8ngCszqUHpamQDSMNYgHh24w+sAKUDaEYdRN6cFDCR3Du0YYe6c2o6HWydPLO+Ggzd4f3mAz/4jjIaDn/kQKUimV2FheR1EapHlZVL+FHWwr48e9Du3Y5Ar/D/odZyXSOd3YG4+o/OyKAio9CwI5gejDdpq5AAtlQUOowrmhaKtRpbQDScOF1cM26zgvDlXHFuhmz/TUgIx1DH0ueLYaocU1xlXHFsENlQGuKg5b442aKtRQ1CmVg4rLmoVFNvQhrHbXAtKtErhDrK0tgupTP4XGK/xHrZpdpkx0M0W6OUexKuGzBaWN1vELXscpZLclNVZjLBjYkwcMTAr7xuG3UhYMWwd4pmmZRDWomcGL3w6S1qGoPgMy38+ndhpDEEDYaFbW0RoKEy5l84IVcK0m/eUUC1M+THjO/5vyOpeY7bprrVI6cmzMVRVX0wcGBtIKivaLoxkfJ+X7RAvq9QGpj100gvzXrSg8QWQt0NXepczdogKy2ue67rRU1uIvJDmXwCb/wo4ddBQ4LRpqRSm7ZucMf3UZ+wH3wIMAPnJ+VlcHpUWAAAAAElFTkSuQmCC';

範例展示

原始碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>多地圖標記切換訊息視窗 - Map8 Platform Documentation</title>
    <link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
    <style>
        #map{
            height: 400px;
            width: 100%;
        }
        .available{
            color:#6b0;
        }
        .unvailable{
            color:#c00;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript">
        var markerEl = document.createElement('img');
        markerEl.src = '[YOUR_IMAGE_HERE]'; // 請代換為您的圖檔之 URL (例如 "https://example.com/image.png")

        var pointsSource = {
            "id": "pois",
            "type": "symbol",
            "source": {
                "type": "geojson",
                "data": {
                    "type": "FeatureCollection",
                    "features": [{
                        "type": "Feature",
                        "properties": {
                            "description": "站點名稱:<strong>南海店</strong><br />站點編號:NH1001<br />開放時間:08:00 ~ 21:00<br />營業狀態:<span class=\"available\">營業中</span>",
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [121.50872, 25.029194]
                        }
                    },{
                        "type": "Feature",
                        "properties": {
                            "description": "站點名稱:<strong>汀州店</strong><br />站點編號:DC1001<br />開放時間:08:30 ~ 22:00<br />營業狀態:<span class=\"available\">營業中</span>",
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [121.509718, 25.027623]
                        }
                    },{
                        "type": "Feature",
                        "properties": {
                            "description": "站點名稱:<strong>明鑫店</strong><br />站點編號:MH1001<br />開放時間:08:00 ~ 22:00<br />營業狀態:<span class=\"available\">營業中</span>",
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [121.507754, 25.027246]
                        }
                    },{
                        "type": "Feature",
                        "properties": {
                            "description": "站點名稱:<strong>中華店</strong><br />站點編號:ZH1001<br />開放時間:14:00 ~ 23:00<br />營業狀態:<span class=\"unvailable\">未營業</span>",
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [121.506262, 25.027673]
                        }
                    },{
                        "type": "Feature",
                        "properties": {
                            "description": "站點名稱:<strong>忠義店</strong><br />站點編號:ZY1001<br />開放時間:09:00 ~ 18:00<br />營業狀態:<span class=\"available\">營業中</span>",
                        },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [121.505516, 25.029691]
                        }
                    }]
                }
            },
            "layout": {
                "icon-image": "marker",
                "icon-offset": [0, -21],
                "icon-allow-overlap": true
            }
        };

        gomp.accessToken = '[YOUR_KEY_HERE]';
        var map = new gomp.Map({
            container: 'map', // 地圖容器 ID
            style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
            maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
            center: [121.507499, 25.028579], // 初始中心座標,格式為 [lng, lat]
            zoom: 16, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            speedLoad: false,
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));

        var popup = new gomp.Popup({
            anchor: 'bottom',
            closeButton: true,
            closeOnClick: false,
            offset: [0, -42]
        });

        map.on('click', 'pois', function(e) {
            // 設定滑鼠游標樣式
            map.getCanvas().style.cursor = 'pointer';

            var coordinates = e.features[0].geometry.coordinates.slice();
            var description = e.features[0].properties.description;

            // 確保訊息視窗不會被遮擋
            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            // 設定訊息視窗內容並在地圖上顯示
            popup.setLngLat(coordinates)
                .setHTML(description)
                .addTo(map);
        });

        map.on('load', function(){
            map.addImage('marker', markerEl);
            map.addLayer(pointsSource);
        });
    </script>
</body>
</html>