點圖層自訂圖示
可同時於地圖上設置多個標記點。
您也能使用以 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%;
}
</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>POST office</strong>",
},
"geometry": {
"type": "Point",
"coordinates": [121.520991, 25.046558]
}
},{
"type": "Feature",
"properties": {
"description": "<strong>Convenience store</strong>",
},
"geometry": {
"type": "Point",
"coordinates": [121.525502, 25.045425]
}
},{
"type": "Feature",
"properties": {
"description": "<strong>MRT station</strong>",
},
"geometry": {
"type": "Point",
"coordinates": [121.523707, 25.044451]
}
},{
"type": "Feature",
"properties": {
"description": "<strong>Pets park</strong>",
},
"geometry": {
"type": "Point",
"coordinates": [121.523738, 25.047023]
}
},{
"type": "Feature",
"properties": {
"description": "<strong>Art gallery</strong>",
},
"geometry": {
"type": "Point",
"coordinates": [121.524837, 25.044845]
}
}]
}
},
"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.523366, 25.045826], // 初始中心座標,格式為 [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
}));
map.on('load', function(){
map.addImage('marker', markerEl);
map.addLayer(pointsSource);
});
</script>
</body>
</html>