カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

GoogleMap 表示範囲内のみマーカー表示

この記事は最終更新日から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,266 views

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です