【Swift】GoogleMapでマーカーがチカチカ点滅・明滅する原因と対処法【Xcode/iOS】
GoogleMapにマーカー(GMSMarker)を複数表示すると、まれに以下のようにチカチカ明滅・点滅する事象に遭遇しました。
今回はその原因と対処法についてまとめています。
チカチカする原因
結論から言うと、同じ緯度・経度上に色または画像の違うマーカーを複数置くと、チカチカしてるように見えてしまいます。
チカチカするサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/// /// 色の違うマーカーを2つ作り、マップ上の同一地点に表示する func addMarkerOnMap(map: GMSMapView, lat: Double, lng: Double){ let marker1 = createMarker(color: .gray) marker1.position = CLLocationCoordinate2D(latitude: lat, longitude: lng) marker1.map = map let marker2 = createMarker() marker2.position = CLLocationCoordinate2D(latitude: lat, longitude: lng) marker2.map = map } /// 色付きのマーカーを作成するメソッド private func createMarker(color: UIColor = .mainColor) -> GMSMarker{ let marker = GMSMarker() let size = CGSize(width: 40, height: 40) // 「marker」と言う名前の画像があるこ let markerImage = UIImage(named: "marker")?.resizeScaleImage(scaledToSize: size).withRenderingMode(.alwaysTemplate) let markerImageView = UIImageView(image: markerImage) markerImageView.tintColor = color marker.iconView = markerImageView return marker } |
addMarkerOnMapメソッドで、同じ地点に色の違うマーカーを表示しています。
この結果、上で示したようにチカチカしてしまいました。
対処方法
GMSMapMarkarクラスの zIndex プロパティ を指定して、マーカーの重なり順を指定します。
zIndex に大きい値を指定したマーカーが、他のマーカーよりも前に表示されるようになります。
改良後のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/// /// 色の違うマーカーを2つ作り、マップ上の同一地点に表示する func addMarkerOnMap(map: GMSMapView, lat: Double, lng: Double){ let marker1 = createMarker(color: .gray) marker1.position = CLLocationCoordinate2D(latitude: lat, longitude: lng) marker1.map = map marker1.zIndex = 0 let marker2 = createMarker() marker2.position = CLLocationCoordinate2D(latitude: lat, longitude: lng) marker2.map = map // marker2をmarker1の上に表示している marker2.zIndex = 1 } |
上のコードでは、marker1（グレーのマーカー）のzIndexを0に、marker2のzIndexを1にすることで、グレーのマーカーが一番後ろに表示されるようにしています。
この結果、チカチカするような動作は解消することができました。
スポンサードリンク