2

Google Maps API v3 を使用して地図上に多数のマーカーを表示するサイトがあります。マーカーはクリック可能で、標準の Google マップ情報ポップアップが開きます。

これは、すべてのデスクトップ ブラウザーでうまく機能します。しかし、何らかの理由で、テストしたモバイル デバイス (さまざまな Android および iOS デバイス) で動作させることができません。マーカーは単にクリックに反応しません。

カスタムマーカーに絞り込みました。を使用してカスタム マーカー イメージをロードするコードを削除すると、new google.maps.MarkerImage()問題なく動作します。

var marker = new google.maps.Marker(
    var markerOptions = {
        icon : new google.maps.MarkerImage(
            mURL, new google.maps.Size(mWidth,mHeight),
            new google.maps.Point(0,0),new google.maps.Point(anchorX,anchorY)
        ),
        flat: true,
        position: point,
        visible: true,
        title: title,
        zIndex: zIndex,
        map: map,
    }
);

google.maps.event.addListener(marker,'click',function() { ...... });

上記のコードは、すべてのデスクトップ ブラウザーで正常に動作しますが、すべてのモバイル ブラウザーでは失敗します。ただし、カスタム グラフィック (つまり、「アイコン」プロパティ) を削除すると、正常に動作します。

何か案は？髪を引っ張ってる！

4

4 に答える 4

8

それを見つけた！

この問題の根本的な原因は、コードがマーカー サイズとアンカー プロパティを文字列として提供していたのに対し、Maps API はそれらが整数であると想定していたことです。値はデータベースからロードされ、PHP プログラムから Javascript に提供されます。したがって、修正は、(int)JSON として出力される配列を作成するときに PHP 値をキャストすることでした。

これは非常に微妙な問題でした。デスクトップ ブラウザーでは、Maps API はこれらの引数が文字列として提供されても問題なく処理できるようです。失敗するのはモバイル ブラウザだけです。

この Maps API の不一致は、コードが記述されたときの初期のサニティ チェックを回避し、問題が見つかった後のデバッグを非常に困難にしていることを意味していました。

したがって、根本的な原因は間違ったデータ型を提供しているにもかかわらず、このような不整合は API のバグであると考えています。

于 2012-04-11T08:11:33.247 に答える
0

クリック/マウスダウンまたは int を使用したスケーリングのいずれも、バグを解決しませんでした。

Chrome リモート インスペクターでデバッグした後、不透明度:0 の div->frame がクリック可能なマーカー (明示的な z-index:2) の上にあることがわかりました。

このフレームが何のためにあるのかわかりません。

スクリプト タグから「signed_in」を削除すると、このフレームを削除できます。

-    <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=googlemapsloaded"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=googlemapsloaded"></script>
于 2016-02-23T21:11:26.547 に答える
0

MarkerImage(親はどこにも閉じていないので、それが壊れているのです。

于 2012-04-10T14:51:25.137 に答える