マップアイテム
HERE SDK for iOS では、マップポリライン、ポリゴン、円、マーカー、マップオーバーレイなど、複数の種類のアイテムをマップに追加できます。 詳細については、以下のセクションで説明します。
- マップポリライン: 移動できないレンダリングされた直線。
- ポリゴンのマップ : 移動できないレンダリング済みの塗りつぶしシェイプ。
- 地図の円 : 移動できないレンダリング済みの塗りつぶし円。
- マップマーカー : マップ上の「マーク」固有のスポットに固定できる画像。
- 地図のオーバーレイ : 地図にネイティブ
UIView
レイアウトを表示する便利な方法です。
ポリライン、ポリゴン、および円は、現在のズーム レベルに基づいてサイズを調整しますが、ズームしてもマーカーおよびオーバーレイは変更されません。
すべての地図アイテムを使用 すると、地図から簡単に選択できます。 ポリライン、ポリゴン、円、およびマーカーの場合、これは mapView.pickMapItems(at:radius:completion:)
を呼び出して行うことができます。また、 MapOverlayLite
では、任意の標準 iOS UIView
の場合と同様に、ネイティブのクリック操作を行うことができます。
マップポリラインの追加
ポリラインは、マップ上のルートジオメトリなどをレンダリングする場合に便利です。 次のように作成できます。
private func createMapPolyline() -> MapPolylineLite {
let coordinates = [GeoCoordinates(latitude: 52.53032, longitude: 13.37409),
GeoCoordinates(latitude: 52.5309, longitude: 13.3946),
GeoCoordinates(latitude: 52.53894, longitude: 13.39194),
GeoCoordinates(latitude: 52.54014, longitude: 13.37958)]
let geoPolyline = try! GeoPolyline(vertices: coordinates)
let mapPolylineStyle = MapPolylineStyleLite()
mapPolylineStyle.setWidthInPixels(inPixels: 20.0)
mapPolylineStyle.setColor(0x00908AA0, encoding: .rgba8888)
let mapPolyline = MapPolylineLite(geometry: geoPolyline, style: mapPolylineStyle)
return mapPolyline
}
MapPolylineLite
は 、次の 3 つの要素で構成されている
- マップ上でポリラインを配置する場所を定義する 2 つ以上の地理座標のリスト。
- この座標のリストを含む
GeoPolyline
。 MapPolylineStyleLite
ポリラインの表示方法を定義する。 少なくとも 1 つの色を設定してください MapPolylineLite
。設定しないと、は非表示のままになります。
1 つの幾何学的な線が 2 つ以上の点で定義 GeoCoordinates
されているため、少なくとも 2 つのを含む配列リストを作成する必要があります。 それ以外の場合は、例外がスローされます。 MapPolylineStyleLite
クラスを使用すると、描画順序、ピクセル単位の太さ、線の色などの属性を定義できます。 スクリーンショットの例については、を参照してください。
描画順序を設定すると、どのマップアイテムを一番上にレンダリングするかを定義できます。 大きい値は小さい値の上に描画されます。 マップマーカーは常にマップ上に描画される他のものの上に描画されますが、マップポリラインは常に、押し出されたビルディング、ラベル、その他のマップポリゴン、およびマップ円の下に描画されます。 地図ポリラインの最も一般的なユースケースは、地図上にルートをレンダリングすることです。一方、地図のマーカーは場所を示すものと想定されているため、非表示にしないでください。
- マップポリラインの描画順序は、他のマップポリラインとの関連でのみ有効です。
- マップのポリゴンおよびマップの円の描画順序は、他のマップのポリゴンおよびマップの円を基準にした場合にのみ有効です。
注
地図アイテムが地図に追加される日付順 は、どのアイテムが最初にレンダリングされるかに影響しません。 MapPolylineLite
、 MapPolygonLite
などのマップアイテムの既定の描画順の値 MapCircleLite
は 0 です。 道路や川などの他のマップ要素の描画順序は、使用している現在のマップスタイルによって異なり ます。 YAML ファイルで定義されたカスタムマップスタイルに合わせて調整できます。詳細については、カスタムマップスタイルのセクションを参照してください。
1 つ以上のマップポリラインを作成した後、次のものを使用してそれらのマップをマップ シーンに追加できます。
let mapPolyline = createMapPolyline()
let mapScene = mapView.mapScene
mapView.mapScene.addMapPolyline(mapPolyline)
マップポリラインがすでにマップ シーンに添付されている場合、それ以上追加しようとすると無視されます。
スクリーンショット: ポリラインを表示。 マップ ビューでは 1 つのシーンのみが許可され、すべてのマップアイテムがそのシーンに直接配置されます。 マップアイテムをグループ化する場合は、配列を使用してマップアイテムを整理し、個別に追加または削除できます。
次のコールを使用すると、mapPolyline
をマップからただちに削除できます。
mapView.mapScene.removeMapPolyline(mapPolyline)
注 :MapPolylineLite
アイテム は選択可能で、アイテムを選択するときに取得できるMetadata
を保存できます。 例については、以下のマップマーカーのセクションを参照してください。
ポリラインスタイルを更新します
上で説明したよう MapPolylineStyleLite
に、直線の色および直線の幅などの他のプロパティは、インスタンスを使用して指定できます。 すでに適用されているプロパティを動的に変更できます。 そのため、新しい MapPolylineStyleLite
インスタンスを作成する必要はありません。
代わり に、マップポリラインがマップ シーンに追加された後で現在のスタイルを再利用したり、そのプロパティの一部を変更したり、マップポリラインインスタンスでupdateStyle()
メソッドを呼び出したりできます。更新されたスタイルインスタンスをパラメータとして渡すだけで済みます。 地図の外観が即座に変更されます。 たとえば、このようにしてアニメーション化されたマップポリラインを作成できます。
マップポリゴンの追加
MapPolygonLite
は 、少なくとも 3 つの座標で構成されているシェイプです。そうでない場合は、レンダリングできません。 MapPolylineLite
と同様に、座標が接続されます。 ポリゴンは、マップ上の領域を強調表示するのに役立ちます。
注 : 座標の順序は重要です。
ポリゴンの作成方法については、以下の例を参照してください。 座標は、リスト内の順序に基づいて接続されます。 結果のシェイプは、新しい MapPolygonStyleLite
インスタンスを使用して色で塗りつぶすことができます。
private func createMapPolygon() -> MapPolygonLite {
let coordinates = [GeoCoordinates(latitude: 52.53032, longitude: 13.37409),
GeoCoordinates(latitude: 52.5309, longitude: 13.3946),
GeoCoordinates(latitude: 52.53894, longitude: 13.39194),
GeoCoordinates(latitude: 52.54014, longitude: 13.37958)]
let geoPolygon = try! GeoPolygon(vertices: coordinates)
let mapPolygonStyle = MapPolygonStyleLite()
mapPolygonStyle.setFillColor(0x00908AA0, encoding: .rgba8888)
let mapPolygon = MapPolygonLite(geometry: geoPolygon, style: mapPolygonStyle)
return mapPolygon
}
MapPolygonLite
は 、次の 3 つの要素で構成されている
- マップ上でポリゴンを配置する場所を定義する 3 つ以上の地理座標のリスト。
- この座標のリストを含む
GeoPolygon
。 - を使用
MapPolygonStyleLite
して、多角形の表示方法を定義します。 少なくとも 1 つの色を設定してください MapPolygonLite
。設定しないと、は非表示のままになります。
ポリゴンは 3 つ以上のポイントで定義されているため GeoCoordinates
、 3 つ以上のポイントを含む配列リストを作成する必要があります。 それ以外の場合は、例外がスローされます。 MapPolygonStyleLite
クラスを使用すると、描画の順序や色などの属性を定義できます。 上記のような塗りつぶしの色、または輪郭を指定する線の色 ( およびオプションで線幅 ) を指定できます ( またはその両方を指定することもできます ) 。 このようにして、塗りつぶされていない地図ポリゴンを作成できます。 スクリーンショットの例については、を参照してください。
描画順序を設定すると、どのマップアイテムを一番上にレンダリングするかを定義できます。 大きい値は小さい値の上に描画されます。 マップマーカーは常にマップ上に描画される他のものの上に描画されますが、マップポリラインは常に、押し出されたビルディング、ラベル、その他のマップポリゴン、およびマップ円の下に描画されます。 地図ポリラインの最も一般的なユースケースは、地図上にルートをレンダリングすることです。一方、地図のマーカーは場所を示すものと想定されているため、非表示にしないでください。
- マップポリラインの描画順序は、他のマップポリラインとの関連でのみ有効です。
- マップのポリゴンおよびマップの円の描画順序は、他のマップのポリゴンおよびマップの円を基準にした場合にのみ有効です。
注
地図アイテムが地図に追加される日付順 は、どのアイテムが最初にレンダリングされるかに影響しません。 MapPolylineLite
、 MapPolygonLite
などのマップアイテムの既定の描画順の値 MapCircleLite
は 0 です。 道路や川などの他のマップ要素の描画順序は、使用している現在のマップスタイルによって異なり ます。 YAML ファイルで定義されたカスタムマップスタイルに合わせて調整できます。詳細については、カスタムマップスタイルのセクションを参照してください。
マップポリゴンを使用して、複雑な塗りつぶしまたは塗りつぶしなしの図形を作成できます。 ただし、自己交差する多角形は、座標がリストの順序で結合されているため、望ましくない結果につながる可能性があります。 代わりに、複数のポリゴンを追加することも、目的の図形のアウトラインに表示されている座標を追加することもできます。
マップのポリラインとは異なり、マップのポリゴンのアウトラインは、最後の座標と一覧表の最初の座標の間で自動的に接続されます。
1 つ以上のマップポリゴンを作成したら、次のものを使用してマップ シーンに追加できます。
let mapPolygon = createMapPolygon()
let mapScene = mapView.mapScene
mapScene.addMapPolygon(mapPolygon)
マップポリゴンがすでにマップ シーンに添付されている場合、それ以上追加しようとすると無視されます。
スクリーンショット: ポリゴンの表示 マップ ビューでは 1 つのシーンのみが許可され、すべてのマップアイテムがそのシーンに直接配置されます。 マップアイテムをグループ化する場合は、配列を使用してマップアイテムを整理し、個別に追加または削除できます。
mapPolygon
をマップからただちに削除するには、次のコマンドを呼び出します。
mapScene.removeMapPolygon(mapPolygon)
注 :MapPolygonLite
アイテム は選択可能で、アイテムを選択するときに取得できるMetadata
を保存できます。 例については、以下のマップマーカーのセクションを参照してください。
多角形スタイルを更新します
上で説明したよう MapPolygonStyleLite
に、塗りのカラーやアウトラインの線幅などのその他のプロパティは、インスタンスを使用して指定できます。 すでに適用されているプロパティを動的に変更できます。 そのため、新しい MapPolygonStyleLite
インスタンスを作成する必要はありません。
代わり に、マップポリゴンがマップ シーンに追加された後で現在のスタイルを再利用したり、そのプロパティの一部を変更したり、マップポリゴンインスタンスでupdateStyle()
メソッドを呼び出したりできます。更新されたスタイルインスタンスをパラメータとして渡すだけで済みます。 地図の外観が即座に変更されます。 たとえば、このようにしてアニメーション化されたマップポリゴンを作成できます。
マップに円を追加
は MapCircleLite
、地図上の領域を強調表示したり、地図上の別の場所をマークしたりするのに便利な円形の図形です。
func createMapCircle() -> MapCircleLite {
let geoCircle = GeoCircle(center: GeoCoordinates(latitude: 52.530932, longitude: 13.384915),
radiusInMeters: 300.0)
let mapCircleStyle = MapCircleStyleLite()
mapCircleStyle.setFillColor(0x00908AA0, encoding: .rgba8888)
let mapCircle = MapCircleLite(geometry: geoCircle, style: mapCircleStyle)
return mapCircle
}
MapCircleLite
は 、次の 3 つの要素で構成されている
- 地図上で円の中心を配置する場所を定義する地理座標のセット。
GeoCircle
これらの座標および円の半径をメートル単位で含む。 - を使用
MapCircleStyleLite
して、円の表示方法を定義します。 少なくとも 1 つの色を設定してください MapCircleLite
。設定しないと、は非表示のままになります。
MapCircleStyleLite
クラスを使用すると、描画の順序や色などの属性を定義できます。 上記のような塗りつぶしの色、または輪郭を指定する線の色 ( およびオプションで線幅 ) を指定できます ( またはその両方を指定することもできます ) 。 このようにして、塗りつぶされていない地図の円を作成できます。 例については、スクリーンショットを参照してください。
描画順序を設定すると、どのマップアイテムを一番上にレンダリングするかを定義できます。 大きい値は小さい値の上に描画されます。 マップマーカーは常にマップ上に描画される他のものの上に描画されますが、マップポリラインは常に、押し出されたビルディング、ラベル、その他のマップポリゴン、およびマップ円の下に描画されます。 地図ポリラインの最も一般的なユースケースは、地図上にルートをレンダリングすることです。一方、地図のマーカーは場所を示すものと想定されているため、非表示にしないでください。
- マップポリラインの描画順序は、他のマップポリラインとの関連でのみ有効です。
- マップのポリゴンおよびマップの円の描画順序は、他のマップのポリゴンおよびマップの円を基準にした場合にのみ有効です。
注
地図アイテムが地図に追加される日付順 は、どのアイテムが最初にレンダリングされるかに影響しません。 MapPolylineLite
、 MapPolygonLite
などのマップアイテムの既定の描画順の値 MapCircleLite
は 0 です。 道路や川などの他のマップ要素の描画順序は、使用している現在のマップスタイルによって異なり ます。 YAML ファイルで定義されたカスタムマップスタイルに合わせて調整できます。詳細については、カスタムマップスタイルのセクションを参照してください。
1 つ以上のマップ円を作成した後、次のものを使用してマップ シーンに追加できます。
let mapCircle = createMapCircle()
let mapScene = mapView.mapScene
mapScene.addMapCircle(mapCircle)
マップの円がすでにマップ シーンに添付されている場合、再度追加しようとすると無視されます。
スクリーンショット: 円を表示。 マップ ビューでは 1 つのシーンのみが許可され、すべての地図アイテムがそのシーンに直接配置されます。 マップアイテムをグループ化する場合は、配列を使用してマップアイテムを整理し、 1 つずつ追加または削除できます。
mapCircle
をマップからただちに削除するには、次のコマンドを呼び出します。
mapScene.removeMapCircle(mapCircle)
注 :MapCircleLite
アイテム は選択可能で、アイテムを選択するときに取得できるMetadata
を保存できます。 例については、以下のマップマーカーのセクションを参照してください。
円のスタイルを更新します
上で説明したよう MapCircleStyleLite
に、塗りのカラーやアウトラインの線幅などのその他のプロパティは、インスタンスを使用して指定できます。 すでに適用されているプロパティを動的に変更できます。 そのため、新しい MapCircleStyleLite
インスタンスを作成する必要はありません。
代わり に、マップの円がマップ シーンに追加された後で現在のスタイルを再利用し、そのプロパティの一部を変更して、マップの円インスタンスでupdateStyle()
メソッドを呼び出すことができます。更新されたスタイルインスタンスをパラメータとして渡すだけで済みます。 地図の外観が即座に変更されます。 たとえば、このようにしてアニメーション化されたマップの円を作成できます。
マップマーカーの追加
地図のマーカーを使用して、地図上の位置を正確にポイントできます。 地図のマーカーは、地図に表示されている他のものの上に常に描画されます。
次のメソッドは、カスタムマップ マーカーをマップに追加します。
let geoCoordinates = GeoCoordinates(latitude: 52.518043, longitude: 13.405991)
let mapMarker = MapMarkerLite(at: geoCoordinates)
let image = UIImage(named: "here_car.png")
let mapImage = MapImageLite(image!)
mapMarker.addImage(mapImage!, style: MapMarkerImageStyleLite())
mapView.mapScene.addMapMarker(mapMarker)
この例では UIImage
、 PNG ("here_cah.png") からを作成 MapImageLite
し、に変換します。 これ MapImageLite
を MapMarkerLite
インスタンスに追加できます。
注
HERE SDK for iOS は、透明度のある、または透明度のない PNG リソース (PDF チャネル ) 、および UIImage
によってネイティブにサポートされている他のすべての一般的なビットマップリソース (PDF など ) をサポートしています。
イメージを表示するには、MapMarkerLite
をマップ シーンに追加する必要があります。 MapImageLite
は、提供されたgeoCoordinates
の中央に表示されます。
スクリーンショット: ランダムに配置されたマップイメージを表示。 上にある赤いマップの円は、マーカーの位置を表示。 マーカーがマップに追加された後で、geoCoordinates
を更新することもできます。 プロパティmapMarker.coordinates
が更新されると、ただちに新しい場所に表示されます。
既定 では、 1 つ以上のマップイメージを追加しない限り、新しいMapMarkerLite
インスタンスはすべて非表示になります。 は MapMarkerLite
、複数のマップイメージから構成できます。また、各マップイメージでは、異なるアンカーポイントを使用できます。
イメージスタイルを更新します
アンカーポイントおよびスケールや回転角度などの他の画像プロパティは MapMarkerImageStyleLite
、インスタンスを使用して指定できます。 すでに適用されているプロパティを動的に変更できます。 そのため、新しい MapMarkerImageStyleLite
インスタンスを作成する必要はありません。
代わり に、マップ マーカーがマップ シーンに追加された後で現在のスタイルを再利用したり、そのプロパティの一部を変更したり、マップ マーカーインスタンスでupdateImageStyle()
メソッドを呼び出したりできます。更新されたスタイルインスタンスをパラメータとして渡すだけで済みます。 地図の外観が即座に変更されます。 たとえば、この方法でアニメーション化されたマップマーカーを作成できます。
アンカーポイントの詳細については、以下のセクションを参照してください。
アンカー付き POI マーカー
デフォルトでは、各画像は指定した位置にセンタリングされており、一部の種類のマーカーでこの設定を変更できます。 POI マーカーの例としては、通常、下中央の位置を指す POI マーカーがあります。
そのため、画像をレンダリングする場所をシフトする必要があります。 デフォルトの中心は (0.5 、 0.5) です。 ビューの右下隅が設定した位置GeoCoordinates
を指すようにする場合は、アンカーポイントを (1,1) に設定する必要があります。
アンカーポイントを使用すると、マーカーをレンダリングする場所を簡単に指定できます。 左上隅は (0,0) のアンカーポイントに相当し、右下隅は (1,1) のアンカーポイントに相当します。 ビューの大きさに関係なく、幅または高さの半分のポイントは常に 0.5 になります。これは、正規化されたテクスチャ UV 座標の概念に似ています。
図 : 正規化されたアンカーポイントでは、マップ マーカーの内部または外部の任意の場所を指定可能。 POI をその場所をポイントするようにシフトする場合は、デフォルトの中央の位置( 0.5 )を維持できますが、画像を 1 つ上にシフトする必要があります。 1 は画像の高さと同じ長さになります。 1 より大きい値、または 0 より小さい値を指定して、イメージを任意の場所に移動することもできます。 2 は画像の高さの 2 倍を表します。
アンカー付き POI マーカーをマップに追加するには、以下の例を参照してください。
let mapMarker = MapMarkerLite(at: geoCoordinates)
let image = UIImage(named: "poi.png")
let mapImage = MapImageLite(image!)
let mapMarkerImageStyle = MapMarkerImageStyleLite()
mapMarkerImageStyle.setAnchorPoint(Anchor2D(horizontal: 0.5, vertical: 1))
mapMarker.addImage(mapImage!, style: mapMarkerImageStyle)
mapView.mapScene.addMapMarker(mapMarker)
1 つのマップ マーカーに複数のマップイメージを追加できます。 mapMarker.coordinates
プロパティを更新してマップ マーカーの場所を移動すると、追加されたすべての画像がその場所に沿って移動し、相対的な位置が維持されます。
注 : この例では、「 poi.png 」という名前のカスタム POI 画像が、プロジェクトのアセットカタログに異なる解像度で追加されています。 iOS プラットフォームは、デバイスの表示密度に基づいて適切な画像解像度を選択します。 この方法については、付属のサンプルアプリを参照してください。
スクリーンショット: ランダムに配置されたマップマーカーを表示。赤いマップの円は、マーカーのアンカー位置を表示。 MapImageLite
で倍率を設定することで、プログラムでのサイズを変更することも MapMarkerImageStyleLite
できます。 1 より小さい値を指定すると、幅と高さが比例して縮小されますが、 1 より大きい値を指定すると画像のサイズが増加します。 デフォルトの倍率は 1 で、画像はスケーリングされません。
地図の円やポリラインとは異なり、地図 MapImageLite
のズームアウト量やズームイン量に関係なく、各円のサイズが維持されます。
マップマーカーの選択
マップにマップマーカーを追加した後、タップジェスチャデリゲートを使用して、ユーザーがマップ マーカーをタップしたかどうかを確認できます。
func onTap(origin: Point2D) {
mapView.pickMapItems(at: origin, radius: 2, completion: onMapItemsPicked)
}
func onMapItemsPicked(pickedMapItems: PickMapItemsResultLite?) {
guard let topmostMapMarker = pickedMapItems?.topmostMarker else {
return
}
showDialog(title: "Map marker picked:", message: "Location: \(topmostMapMarker.coordinates)")
}
このクラスは TapDelegate
プロトコルに準拠している必要があります。 このために、クラスをデリゲート () に設定しますmapView.gestures.tapDelegate = self
。 画面上のタップした位置のビュー座標を使用して、その位置を囲む地図マーカーをマップ ビューに要求できます。 ほとんどの場合、半径を 2 ピクセルに指定するのが適切です。 TAP イベントを受信した後、完了ハンドラを追加して、見つけたマップアイテム( A MapCircleLite
、 A MapPolylineLite
、 A MapPolygonLite
、 A MapMarkerLite
など)へのアクセス権を提供するオプション PickMapItemsResultLite
の結果を確認します。
注
同じタイプのアイテムを選択する場合 ===
、 - 演算子を使用してインスタンスを比較できます。
多くの場合、ユーザーは表示されているマーカーと対話したい場合があります。たとえば、検索結果をタップして、レストランの詳細を確認できます。 この目的のために、MapMarkerLite
はクラスMetadata
のインスタンスを保持できるので、さまざまな種類のデータをクラスに添付できます。カスタムタイプもサポートされています。
Metadata
複数のキー / 値のペアを保持できます。 以下では、という名前の新しいキーを作成し "key_poi"
、 String
マーカーのタイプに関する情報を含む AS 値を設定します。
let metadata = Metadata()
metadata.setString(key: "key_poi", value: "This is a POI.")
mapMarker.metadata = metadata
必要に応じて、任意の情報を設定できます。 インスタンスMetadata
の内容を読み取る瞬間に、キーに保存されているデータを要求するだけです。この例"key_poi"
を次に示します。
if let message = topmostMapMarker.metadata?.getString(key: "key_poi") {
showDialog(title: "Map Marker picked", message: message);
return
}
デフォルトでは、 MapMarkerLite
インスタンスには Metadata
が含まれておらず、 topmostMapMarker.metadata
nil
含まれている場合もあります。 オブジェクトMetadata
にそのような情報が含まれていない場合、キーによってアクセスされるデータは、nil
になることもあります。
存在する場合は、格納されているキー"key_poi"
String
を探し、ヘルパーメソッドを呼び出して、格納されているString
をユーザーに提示します。 設定に基づいて任意の文字列をキーとして選択できますが、一意のキーを使用するか、または別のデータアイテムに保存されているコンテンツを上書きします。 サンプルのソースコード全体を確認 するには、 MapMarker のサンプルアプリを確認してください。
注
CustomMetadataValue
インターフェイスを使用して、Metadata
にカスタムオブジェクトを保存することもできます。 検索 結果データオブジェクト全体が保存されている [ 検索 ] セクションに例があります。
平面地図マーカー
デフォルトでは、マップマーカーはマップとともに回転せず、マップが傾いても傾斜しません。 これを変更するに は、MapMarkerLite
をフラットに設定します。 次のコードを使用して、対応するを変更 MapMarkerImageStyleLite
します。
mapMarkerImageStyle.setFlat(true)
結果は以下のスクリーンショットに表示されます。
フラットマップマーカー - マップと一緒に回転および傾斜。 地図上の地図マーカーは、回転した地図と一緒に回転します。また、地図を傾けるとマップ マーカーも傾斜し、 3D のような効果が得られます。 デフォルトでは、フラットマップマーカー の縮尺値は地図のズーム レベルと一緒に変更されません。 たとえば、マップをズームアウトしても、展開されていないマップ マーカーと同じようにマップ マーカーが表示されます。
地図オーバーレイを追加します
地図のマーカーを使用 UIView
すると、地図にアイテムをシームレスに配置できますが、地図のオーバーレイを使用して、地図のネイティブの位置を固定できます。 情報のバブル、注釈、またはカスタマイズされたコントロールを表示する場合に便利です。 たとえば、マップ マーカーをタップすると、マーカーの場所に関する追加情報を含むマップ オーバーレイを表示できます。
マップオーバーレイには複数の UIViews
オーバーレイを含めることができ、ユーザー定義の自動レイアウト制約、アニメーション、ネイティブのジェスチャ処理を行った後で、各オーバーレイを他の UIView
オーバーレイと同様に使用できます。たとえば、 UITapGestureRecognizers
を使用できます。
カスタムの場合と同様に、 Interface Builder のレイアウトファイルでビューを定義してViewController
に接続するか、またはプログラムで目的のビューコンテンツを生成できます。 例 :
let textView = UITextView(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
textView.textAlignment = .center
textView.isEditable = false
textView.backgroundColor = UIColor(red: 72/255, green: 218/255, blue: 208/255, alpha: 1)
textView.textColor = .white
textView.font = .systemFont(ofSize: 17)
textView.text = "Centered MapOverlay"
は UITextView
の子孫 UIView
で、オーバーレイとして直接使用できます。 この操作を新しい MapOverlayLite
インスタンスに追加して地図に表示するだけです。
let mapOverlay = MapOverlayLite(view: textView, geoCoordinates: geoCoordinates)
mapView.addMapOverlay(mapOverlay)
mapView
オブジェクトに追加されると、ネストされているすべてのサブビューを含むビューが指定した geoCoordinates
場所の中央に表示され、マップの移動時にその場所が自動的に指定した地理的位置に調整されます。
注
地図のオーバーレイは、常に他の地図アイテムの上に描画されます。
textView.isEditable
で始まる行を削除してください 。 どうなりますか? MapOverlayLite
は、 提供された場所に実際 のビューがレンダリングされるようにするため、これによってUITextView
のデフォルトの動作が有効になり、編集可能になります。
スクリーンショット: UITextView を示すマップ オーバーレイ。 デフォルトでは、ビューは指定した場所の中央に配置されます。 アニメーションをビューに適用したり、他のインタラクションリスナーを添付したりすることもできます。 ビューが MapOverlayLite
オブジェクトに添付されると、他の iOS と同様に動作します UIView
。ただし、ビューはマップ上で固定されたままになり、パンまたはズーム時に移動します。 MapOverlayLite
地図を回転しても、地図のポリラインや地図のマーカーと同様に、は回転しません。
地図のオーバーレイはいくつでも追加できますが、パフォーマンスを考慮する必要があります。 たとえば、複数の検索結果を地図に表示する場合、地図のオーバーレイのパフォーマンスは地図のマーカーよりも低くなります。
地図からオーバーレイを削除するには、次の電話番号を呼び出します。
mapView.removeMapOverlay(mapOverlay)
複数 MapOverlayLite
のインスタンスを追加した場合は mapView
、次のコマンドを呼び出して、オブジェクトからすべてのオーバーレイにアクセスできます。
let mapOverlays = mapView.overlays
通常、地図のオーバーレイは 、地図上の特定の場所の追加の動的コンテンツを表示する場合に最適です。
アンカー付き地図のオーバーレイ
デフォルトでは、マップ オーバーレイは指定した場所の中央に配置されます。 ただし、下の領域を覆わずにオーバーレイを使用する場合は、どうすればよいですか。
この目的のために、任意のUIView
で行うのと同様に、アンカーポイントを指定できます。
textView.layer.anchorPoint = CGPoint(x: 0.5, y: 1)
これにより、ビューが位置の中央に水平に配置され、ビューの下部が指定した座標と一致します。 以下のスクリーンショットで表示されているように、マップ オーバーレイは、マップ オーバーレイの提供された中心位置を示すマップの円オブジェクトに配置されます。
スクリーンショット: 固定マップ オーバーレイ。 アンカーポイントを使用すると、ビューをレンダリングする場所を簡単に指定できます。 ビューの大きさに関係なく、幅または高さの半分のポイントは常に 0.5 になります。これは、正規化されたテクスチャ UV 座標の概念に似ています。
デフォルトでは、アンカーポイントは (0.5 、 0.5) で、ビューがその位置を中心にレンダリングされます。 ビューのサイズは任意であるため、最大の幅と高さの値は 1 になります。 ビューの寸法は、完全に膨張した後で計算されます。 ビューの正確な寸法がわかっている場合は、ビュー内の特定の点を、最大値の 1 を基準にして簡単に計算できます。
注 : オフセット を使用すると、 x 軸および y 軸に沿った平行移動を指定できますが 、基準点は、ビューなどの長方形の左上隅の相対位置を定義します。 ビューの境界を基準 GeoCoordinates
にして、ビューが指定した位置を中心とする点を定義します。