GoogleMap 表示範囲内のみマーカー表示
- iOS
-
2017-04-10 - 更新:2018-02-15
この記事は最終更新日から1年以上経過しています。
GoogleMap上にたくさんのマーカーを描画したい場合、マーカーが多過ぎて処理が重くなるのを防ぎたいので、
予め地図の表示範囲内のみ、マーカーを描画するようにしてみたいと思います。
まずはイベントを受け取り、処理できるようデリゲート[GMSMapViewDelegate]を追加します。
class SampleViewController: UIViewController, GMSMapViewDelegate {
GoogleMapオブジェクトにデリゲートを設定します。
googleMap.delegate = self
マーカーを追加する際、後から表示/非表示を変更したいので、配列のマーカーオブジェクトを宣言しておきます。
var markers : [GMSMarker] = []
マーカーを追加したときに先ほどの配列に追加します。
let marker: ... markers.append(marker)
ユーザーの操作、地図のアニメーションがアイドル状態になった時に動作するメソッドを追加します。
func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
// 配列をループして取り出し
for(marker) in markers {
// 地図の表示領域内に含まれるか
if(googleMap.projection.contains(marker.position)) {
// 含まれる場合
marker.map = googleMap
} else {
// 含まれない場合
marker.map = nil
}
}
}
まとめ
import UIKit
import GoogleMaps
class SampleViewController: UIViewController, GMSMapViewDelegate {
var googleMap : GMSMapView!
let latitude: CLLocationDegrees = 34.687322
let longitude: CLLocationDegrees = 135.526195
// マーカー配列
var markers : [GMSMarker] = []
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
// ズームレベル
let zoom: Float = 10
// カメラを生成
let camera: GMSCameraPosition = GMSCameraPosition.camera(withLatitude: latitude, longitude: longitude, zoom: zoom)
// MapViewを生成
googleMap = GMSMapView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height))
googleMap.delegate = self
// MapViewにカメラを追加
googleMap.camera = camera
// マーカーの生成
let marker: GMSMarker = GMSMarker()
marker.position = CLLocationCoordinate2DMake(latitude, longitude)
marker.map = googleMap
// マーカーを配列に追加
markers.append(marker)
// viewにMapViewを追加
self.view.addSubview(googleMap)
}
func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
// 配列をループして取り出し
for(marker) in markers {
// 地図の表示領域内に含まれるか
if(googleMap.projection.contains(marker.position)) {
// 含まれる場合
marker.map = googleMap
} else {
// 含まれない場合
marker.map = nil
}
}
}
.
.
.
Xcode: 8.3.1
Swift: 3.1
OS: Sierra 10.12
この記事がお役に立ちましたらシェアお願いします
4,429 views




