Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris. # Cara menambahkan penanda ke peta statis Dalam topik ini, Anda akan belajar cara menambahkan penanda ke peta statis yang dihasilkan dengan Amazon Location Service. Anda dapat menyesuaikan ikon penanda, label, ukuran, warna, dan opsi gaya lainnya. Ini memungkinkan Anda untuk menyorot lokasi tertentu dengan isyarat visual yang selaras dengan tujuan peta Anda. ## Penataan penanda | Nama | Tipe | Default | Deskripsi | | --- | --- | --- | --- | | `style` | String | `marker` | Gaya geometri Titik. Untuk membuat penanda, atur nilai ke `marker` atau tidak menyertakan `style` atribut dalam objek properti GeoJSON. | | `icon` | String | `pin` | Jenis ikon penanda. Nilai yang tersedia meliputi: `cp` (lingkaran kedekatan)`diamond`,`pin`,,`poi`,`square`,`triangle`,`bubble`. | | `label` | String | `` | Teks untuk ditampilkan pada koordinat. Untuk mengatur label otomatis, gunakan nilai berikut: `$alpha` (alfabet Latin) atau `$num` (angka Arab). | | `color` | Warna | Tergantung gaya | Warna ikon. | | `outline-color` | Warna | Tergantung gaya | Warna garis besar ikon. | | `text-color` | Warna | Tergantung gaya | Warna teks label. | | `text-outline-color` | Warna | Tergantung gaya | Warna garis besar teks. | | `outline-width` | Bilangan Bulat | `0`(dimatikan) | Lebar garis besar teks. | | `size` | String | `medium` | Ukuran label dan ikon. Nilai yang tersedia:`small`,`medium`,`large`. | ## Menambahkan Marker ke Gambar Peta Dalam contoh ini, Anda akan menempatkan penanda dengan label pada gambar peta 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 ] Dengan 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 ] ![Tampilan satelit Vancouver menunjukkan stadion BC Place yang ditandai dengan pin lokasi di dekat False Creek.](http://docs.aws.amazon.com/id_id/location/latest/developerguide/images/static-add-marker.png) ------ ## Tambahkan beberapa penanda ke gambar peta Dalam contoh ini, Anda akan menambahkan spidol untuk tempat-tempat yang harus dilihat di Helsinki, Finlandia menggunakan koordinatnya (bujur, garis lintang). Anda juga dapat menerapkan padding untuk memastikan peta mengakomodasi semua spidol dengan benar. **catatan** Jenis ikon penanda yang tersedia meliputi: `cp` untuk lingkaran kedekatan,`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 ] ![Respons API Peta Statis menunjukkan beberapa penanda bernomor yang ditempatkan di lokasi yang berbeda, menunjukkan dukungan multi-penanda.](http://docs.aws.amazon.com/id_id/location/latest/developerguide/images/static-add-multi-markers.png) ------ ## Ubah warna penanda pada gambar peta Dalam contoh ini, Anda akan menggunakan penanda gelembung dengan warna berbeda untuk mewakili kota di seluruh dunia. Anda dapat menyesuaikan warna penanda, label, dan properti lainnya agar sesuai dengan konteks peta Anda. `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 ] ![Peta dunia yang menunjukkan kota-kota berlabel termasuk Brussels, Paris, Kairo, Dubai, Nairobi, Patna, Beijing, Ulaanbaatar, Hanoi, Sydney, dan Wellington.](http://docs.aws.amazon.com/id_id/location/latest/developerguide/images/static-change-marker-color.png) ------