翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# 静的マップにマーカーを追加する方法
このトピックでは、Amazon Location Service で生成された静的マップにマーカーを追加する方法について説明します。マーカーのアイコン、ラベル、サイズ、色、その他のスタイル設定のオプションをカスタマイズできます。これにより、マップの目的に沿ったビジュアルキューで特定の位置を強調表示できます。
## マーカーのスタイル設定
| 名前 | 型 | デフォルト | 説明 |
| --- | --- | --- | --- |
| `style` | 文字列 | `marker` | ポイントジオメトリのスタイル。マーカーを作成するには、値を `marker` に設定するか、GeoJSON のプロパティオブジェクトに `style` 属性を含めないでください。 |
| `icon` | 文字列 | `pin` | マーカーアイコンのタイプ。使用できる値には、`cp` (近接円)、`diamond`、`pin`、`poi`、`square`、`triangle`、`bubble` などがあります。 |
| `label` | 文字列 | `` | 座標に表示するテキスト。自動ラベルを設定するには、`$alpha` (ラテンアルファベット) または `$num` (アラビア数字) の値を使用します。 |
| `color` | 色 | スタイル依存 | アイコンの色。 |
| `outline-color` | 色 | スタイル依存 | アイコンのアウトラインの色。 |
| `text-color` | 色 | スタイル依存 | ラベルテキストの色。 |
| `text-outline-color` | 色 | スタイル依存 | テキストのアウトラインの色。 |
| `outline-width` | 整数 | `0` (オフ) | テキストのアウトラインの幅。 |
| `size` | 文字列 | `medium` | ラベルとアイコンのサイズ。指定できる値: `small`、`medium`、`large`。 |
## マップ画像にマーカーを追加する
この例では、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 ]
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 ]
![\[Aerial view of Vancouver's downtown and harbor, with BC Place stadium marked.\]](http://docs.aws.amazon.com/ja_jp/location/latest/developerguide/images/static-add-marker.png)
------
## マップ画像に複数のマーカーを追加する
この例では、座標 (経度、緯度) を使用して、フィンランドのヘルシンキの必見の場所にマーカーを追加します。パディングを適用して、マップがすべてのマーカーに適応するように調整することもできます。
**注記**
使用できるマーカーアイコンのタイプには、`cp` (近接円)、`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 ]
![\[Aerial view of a city with lakes, buildings, roads, and numbered markers indicating points of interest.\]](http://docs.aws.amazon.com/ja_jp/location/latest/developerguide/images/static-add-multi-markers.png)
------
## マップ画像のマーカーの色を変更する
この例では、さまざまな色のバブルマーカーを使用して、世界中の都市を表します。マーカーの色、ラベル、その他のプロパティは、マップのコンテキストに合わせてカスタマイズできます。
`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 ]
![\[World map showing locations of major cities across continents with colored labels.\]](http://docs.aws.amazon.com/ja_jp/location/latest/developerguide/images/static-change-marker-color.png)
------