1

Gmap3とPNGオーバーレイを使用して座標トレースアプリケーションを構築しているときに、PNG画像をグラウンドオーバーレイとして使用する際に問題が発生しました。クリックイベントが画像の境界内にある場合、マップ要素のクリックイベントは有効になりません。

pointer-events: none画像要素と親divでCSSを使用してみましたが、これにより、マップ上のどこでもクリックイベントが発生しなくなりました。トグル関数を使用してdiv/imgをマップから非表示にしようとしましたが、範囲内にクリックイベントはありません。

また、オーバーレイにクリックイベントを設定しようとしましたが、残念ながら、オーバーレイで使用できるlatLngプロパティがないため、メソッドも廃止されました。

私の一時的な解決策は、2つの絶対位置のマップを作成することです。一方はオーバーレイなしで、もう一方はオーバーレイありで、トグルボタンはオーバーレイ付きのマップを非表示にし、ユーザーが画面上で指を押してトグルボタンを使用してトレースする必要があります。明らかに、位置が失われるため、人々が地図をズーム/パンするときにこれが問題になります。

http://jsfiddle.net/abestic9/TTRTg/

この手動マップトレースの方法を許可するにはどうすればよいですか、または私がやろうとしていることを行うためのより簡単な方法はありますか？

4

2 に答える 2

1

2つのマップは必要ありません。latLngは、gmap3-groundoverlayのクリックイベントには使用できませんが、ネイティブには使用できますgoogle.maps.GroundOverlay。

google.maps.event.addListener(
    //the google.maps.GroundOverlay
  $('#map').gmap3({get:{name:'groundoverlay',all:false}}), 
  'click', 
  function(e) {
    //trigger click-event for the map
  google.maps.event.trigger($('#map').gmap3('get'), 'click', e);
});

google.maps.event.addListener(
  $('#map').gmap3('get'), 
  'click', 
  function(e) {
    //your code
});
于 2013-03-22T21:54:47.550 に答える
1

GoogleMaps v3（gmap3ではない）でGroundOverlaysのクリックをキャプチャする方法を探している人のために、マップをクリックするのと同じ方法でこれらをキャプチャします。

function main(){
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  google.maps.event.addListener(map, 'click', mapClicked);

  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(25.1875,-124.6875),
    new google.maps.LatLng(52.8125,-67.0625)
  );

  var newoverlay = new google.maps.GroundOverlay('image.png', bounds);
  newoverlay.setMap(map);
  google.maps.event.addListener(newoverlay,'click',mapClicked);
}

function mapClicked(event){
  console.log(event.latLng);
}
于 2014-06-23T14:59:45.707 に答える