20

SVG パス表記を使用して、Google Maps API v3 を使用してポリラインと共にマーカーを作成しています。いくつかのマーカーを追加した後、マップに表示されなくなることがあります。マップを 1 ピクセルでもパンすると、再び表示されます。

いくつか追加すると SVG マーカーが表示されなくなる いくつか追加すると SVG マーカーが表示されなくなる

パン後に SVG マーカーが再び表示される パン後に SVG マーカーが再び表示される

これは、FF、Safari、Chrome、および iPhone ブラウザで発生します。

ポリラインのコードは次のとおりです。

var lineSymbol = {
    path: g.SymbolPath.FORWARD_OPEN_ARROW,
    scale:1.5
};

polyOptions = {
    strokeColor: '#0026b3',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    geodesic: true,
    icons: [{
        icon: lineSymbol,
        repeat: '100px'
    }],
    zIndex: 10
};

polyLine = new g.Polyline(polyOptions);
polyLine.setMap(map);

SVG マーカーのコード:

var path = polyLine.getPath();
path.push(event.latLng);

var icon = {

    path: "M68.501,23.781 43.752,48.529 66.918,71.695 66.918,120.362 70.085,120.362 70.085,71.694 93.249,48.529",
    fillColor: iconColor,
    fillOpacity: .8,
    anchor: new g.Point(70.085, 120.362),
    strokeWeight: 0,
    scale:.4
};

var marker = new g.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon,
    title: title,
    zIndex : -20
});

マーカーが実際にマップ上にあるのに、マーカーが消える理由は何ですか? 前もって感謝します。

問題を再現できるフィドルは次のとおりです。http://jsfiddle.net/upsidown/gNQRB/

この問題を説明する YT ビデオは次のとおりです: https://www.youtube.com/watch?v=uGAiwAuasmU

編集：

Google でバグ レポートが作成されました: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5351

4

2 に答える 2

17

Chrome (Windows) バージョン 26.0.1410.64 でテスト済み

ただし、試してみるべきことはいくつかあります。

  • マーカーzIndexを削除します。意図的に非表示にしようとしていますか? 見る：zIndex -20
  • fillOpacity を削除
  • 地図を動かすと見えるようになると言いましたか？あなたはすでにmap.setCenter();をやっています。しかし、それは十分ではありませんか？または、次のように、マーカーを移動する必要がないように、マーカーを追加するときにマップ イベントの 1 つをトリガーすることもできます。google.maps.event.trigger(map, 'drag');
  • すべてのマーカーを配列内に格納し、新しいマーカーが追加されたときにそれらをループするとどうなるでしょうか? トリガーするgoogle.maps.event.trigger(marker, 'icon_changed');
  • 同じコードでpngを使用し、問題がsvgのみにあるかどうかを確認します

これは私がこれらのことのいくつかを試したJSフィドルです。

編集：

map.panTo(latLng);いくつかのテストの後、代わりにを使用するとmap.setCenter(latLng);、SVG マーカーが正しく描画されることに気付きました。または、中央にパンしたくない場合は、map.panBy(x, y);1 ピクセルとして使用してから前の中央に戻る (高速) と、この問題を解決するのと同様の効果がある可能性があります。

これが実際の動作を確認するためのJS fiddleです。

于 2013-05-04T17:09:53.357 に答える