選取您的 Cookie 偏好設定

我們使用提供自身網站和服務所需的基本 Cookie 和類似工具。我們使用效能 Cookie 收集匿名統計資料,以便了解客戶如何使用我們的網站並進行改進。基本 Cookie 無法停用,但可以按一下「自訂」或「拒絕」以拒絕效能 Cookie。

如果您同意,AWS 與經核准的第三方也會使用 Cookie 提供實用的網站功能、記住您的偏好設定,並顯示相關內容,包括相關廣告。若要接受或拒絕所有非必要 Cookie,請按一下「接受」或「拒絕」。若要進行更詳細的選擇,請按一下「自訂」。

How to add an icon on the map

焦點模式

在本頁面

How to add an icon on the map - Amazon Location Service
此頁面尚未翻譯為您的語言。 請求翻譯

Amazon Location Service enables you to add icons, preferably in PNG format, to the map. You can add icons to specific geolocations and style them as needed.

Add a static icon

In this example, you will use an external URL to add an icon to the map using a symbol layer.

index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Static icon on map</title> <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." /> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' /> <link rel='stylesheet' href='style.css' /> <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script> </head> <body> <!-- Map container --> <div id="map"></div> <script> const apiKey = "<API_KEY>"; const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc. const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; const map = new maplibregl.Map({ container: 'map', // container id style: styleUrl, // style URL center: [-123.1144289, 49.2806672], // starting position [lng, lat] (e.g., Vancouver) zoom: 12, // starting zoom }); map.on('load', async () => { image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/1/1e/Biking_other.png'); map.addImage('biking', image.data); map.addSource('point', { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-123.1144289, 49.2806672] } } ] } }); map.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'point', 'layout': { 'icon-image': 'biking', 'icon-size': 0.25 } }); }); </script> </body> </html>
style.css
body { margin: 0; padding: 0; } html, body, #map { height: 100%; }

index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Static icon on map</title> <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." /> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' /> <link rel='stylesheet' href='style.css' /> <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script> </head> <body> <!-- Map container --> <div id="map"></div> <script> const apiKey = "<API_KEY>"; const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc. const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; const map = new maplibregl.Map({ container: 'map', // container id style: styleUrl, // style URL center: [-123.1144289, 49.2806672], // starting position [lng, lat] (e.g., Vancouver) zoom: 12, // starting zoom }); map.on('load', async () => { image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/1/1e/Biking_other.png'); map.addImage('biking', image.data); map.addSource('point', { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-123.1144289, 49.2806672] } } ] } }); map.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'point', 'layout': { 'icon-image': 'biking', 'icon-size': 0.25 } }); }); </script> </body> </html>
style.css
body { margin: 0; padding: 0; } html, body, #map { height: 100%; }
<!DOCTYPE html> <html lang="en"> <head> <title>Static icon on map</title> <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." /> <meta charset='utf-8'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' /> <link rel='stylesheet' href='style.css' /> <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script> </head> <body> <!-- Map container --> <div id="map"></div> <script> const apiKey = "<API_KEY>"; const mapStyle = "Standard"; // e.g., Standard, Monochrome, Hybrid, Satellite const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc. const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`; const map = new maplibregl.Map({ container: 'map', // container id style: styleUrl, // style URL center: [-123.1144289, 49.2806672], // starting position [lng, lat] (e.g., Vancouver) zoom: 12, // starting zoom }); map.on('load', async () => { image = await map.loadImage('https://upload.wikimedia.org/wikipedia/commons/1/1e/Biking_other.png'); map.addImage('biking', image.data); map.addSource('point', { 'type': 'geojson', 'data': { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [-123.1144289, 49.2806672] } } ] } }); map.addLayer({ 'id': 'points', 'type': 'symbol', 'source': 'point', 'layout': { 'icon-image': 'biking', 'icon-size': 0.25 } }); }); </script> </body> </html>
隱私權網站條款Cookie 偏好設定
© 2025, Amazon Web Services, Inc.或其附屬公司。保留所有權利。