View a markdown version of this page

Come aggiungere un marker a una mappa statica - Servizio di posizione Amazon

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Come aggiungere un marker a una mappa statica

In questo argomento, imparerai come aggiungere marker alle mappe statiche generate con Amazon Location Service. Puoi personalizzare l'icona, l'etichetta, la dimensione, il colore e altre opzioni di stile del marker. Ciò consente di evidenziare posizioni specifiche con segnali visivi in linea con lo scopo della mappa.

Stile dei pennarelli

Nome

Tipo

Predefinita

Description

style

Stringa

marker

Lo stile della geometria Point. Per creare un marker, imposta il valore su marker o non includi l'styleattributo nell'oggetto properties di GeoJSON.

icon

Stringa

pin

Il tipo di icona del marker. I valori disponibili includono: cp (cerchio di prossimità)diamond,pin,poi,, squaretriangle,bubble.

label

Stringa

<empty>

Il testo da visualizzare in corrispondenza delle coordinate. Per impostare etichette automatiche, utilizza i seguenti valori: $alpha (alfabeto latino) o $num (numeri arabi).

color

Colore

Dipende dallo stile

Il colore dell'icona.

outline-color

Colore

Dipende dallo stile

Il colore del contorno dell'icona.

text-color

Colore

Dipende dallo stile

Il colore del testo dell'etichetta.

text-outline-color

Colore

Dipende dallo stile

Il colore del contorno del testo.

outline-width

Numero intero

0(disattivato)

La larghezza del contorno del testo.

size

Stringa

medium

Dimensioni dell'etichetta e dell'icona. Valori disponibili:small,medium,large.

Aggiungere un marker a un'immagine della mappa

In questo esempio, posizionerai un indicatore con un'etichetta sull'immagine della mappa di BC Place, Vancouver.

Geo JSON:

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -123.11210, 49.2767875 ] }, "properties": { "color":"#EE4B2B", "size":"large", "label":"BC Place, Vancouver", "text-color":"#0000FF" } } ] }

Compact:

point: -123.11210,49.27678; label=BC Place, Vancouver; size=large; text-color=#0000FF; color=#EE4B2B
Request URL

Con l'overlay GeoJSON

https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&zoom=15&scale-unit=KilometersMiles&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22properties%22%3A%7B%22color%22%3A%22%23EE4B2B%22,%22size%22%3A%22large%22,%22label%22%3A%22BC%20Place,%20Vancouver%22,%22text-color%22%3A%22%230000FF%22%7D,%22geometry%22%3A%7B%22coordinates%22%3A%5B-123.11210974152168,49.27678753813112%5D,%22type%22%3A%22Point%22%7D%7D%5D%7D&key=API_KEY
Response image
Veduta satellitare di Vancouver che mostra lo stadio BC Place contrassegnato da un segnaposto vicino a False Creek.

Aggiungi più marker a un'immagine della mappa

In questo esempio, aggiungerai degli indicatori per i luoghi imperdibili di Helsinki, in Finlandia, usando le loro coordinate (longitudine, latitudine). Puoi anche applicare il padding per assicurarti che la mappa contenga correttamente tutti i marker.

Nota

Il tipo di icona marker disponibile include: cp per il cerchio di prossimità,. diamond, pin, poi, square, triangle, bubble

Geo JSON:

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "MultiPoint", "coordinates": [ [24.9526, 60.1692], [24.9270, 60.1725], [24.9226, 60.1826], [24.9509, 60.1675], [24.9566, 60.1685], [24.9457, 60.1674], [24.9397, 60.1719], [24.9414, 60.1715], [24.9387, 60.1720] ] }, "properties": { "icon":"diamond", "label":"$num", "size":"large", "text-color":"%23972E2B", "text-outline-color":"%23FFF", "text-outline-width":2 } } ] }
Request URL
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1024&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22MultiPoint%22,%22coordinates%22%3A%5B%5B24.9526,60.1692%5D,%5B24.927,60.1725%5D,%5B24.9226,60.1826%5D,%5B24.9509,60.1675%5D,%5B24.9566,60.1685%5D,%5B24.9457,60.1674%5D,%5B24.9397,60.1719%5D,%5B24.9414,60.1715%5D,%5B24.9387,60.172%5D%5D%7D,%22properties%22%3A%7B%22icon%22%3A%22diamond%22,%22label%22%3A%22%24num%22,%22size%22%3A%22large%22,%22text-color%22%3A%22%23972E2B%22,%22text-outline-color%22%3A%22%23FFF%22,%22text-outline-width%22%3A2%7D%7D%5D%7D&key=API_KEY
Response image
Risposta dell'API Static Maps che mostra più marker numerati posizionati in posizioni diverse, a dimostrazione del supporto di più marker.

Cambia il colore del marker in un'immagine della mappa

In questo esempio, utilizzerai marcatori a bolle di diversi colori per rappresentare le città di tutto il mondo. È possibile personalizzare il colore, l'etichetta e altre proprietà del marker per adattarli al contesto della mappa.

Geo JSON:

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [85.1376, 25.5941] }, "properties": { "label": "Patna", "icon": "bubble", "color": "#FF5722", "outline-color": "#D74D3D", "text-color": "#FFFFFF" } }, .....redacted..... { "type": "Feature", "geometry": { "type": "Point", "coordinates": [2.3522, 48.8566] }, "properties": { "label": "Paris, France", "icon": "bubble", "color": "#FF9800", "outline-color": "#D76B0B", "text-color": "#FFFFFF" } } ] }
Request URL
https://maps.geo.eu-central-1.amazonaws.com/v2/static/map?style=Satellite&width=1400&height=1024&padding=150&geojson-overlay=%7B%22type%22%3A%22FeatureCollection%22,%22features%22%3A%5B%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B85.1376,25.5941%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Patna%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF5722%22,%22outline-color%22%3A%22%23D74D3D%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B105.8542,21.0285%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Hanoi,%20Vietnam%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%232196F3%22,%22outline-color%22%3A%22%231A78C2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B116.4074,39.9042%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Beijing,%20China%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FF9800%22,%22outline-color%22%3A%22%23D76B0B%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B106.9101,47.918%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Ulaanbaatar,%20Mongolia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%239C27B0%22,%22outline-color%22%3A%22%237B1FA2%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B151.2093,-33.8688%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Sydney,%20Australia%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%234CAF50%22,%22outline-color%22%3A%22%23388E3C%22,%22text-color%22%3A%22%23FFFFFF%22%7D%7D,%7B%22type%22%3A%22Feature%22,%22geometry%22%3A%7B%22type%22%3A%22Point%22,%22coordinates%22%3A%5B174.7633,-41.2865%5D%7D,%22properties%22%3A%7B%22label%22%3A%22Wellington,%20New%20Zealand%22,%22icon%22%3A%22bubble%22,%22color%22%3A%22%23FFC107%22,%22outline-color%22%3A%22%23FFA000%22,%22text-color%22%3A%22%23000000%22%7D%7D%5D%7D&key=API_KEY
Response image
Mappa del mondo che mostra città etichettate tra cui Bruxelles, Parigi, Il Cairo, Dubai, Nairobi, Patna, Pechino, Ulan Bator, Hanoi, Sydney e Wellington.