使用 Gmap3 的点击式 GroundOverlay

Question

在使用 Gmap3 和 PNG 覆盖构建坐标追踪应用程序时，我遇到了将 PNG 图像用作地面覆盖的问题。当点击事件在图片范围内时，地图元素的点击事件不生效。

我已经尝试在图像元素和父 div 上使用 CSS pointer-events: none，这只会阻止地图上任何地方的点击事件。我尝试使用切换功能从地图中隐藏 div/img，但边界内仍然没有点击事件。

我还尝试在叠加层上设置点击事件，不幸的是，叠加层上没有可用的 latLng 属性，因此该方法也被废弃了。

我的临时解决方案是有两张绝对定位的地图，相同的坐标，但一张没有覆盖，一张有，一个切换按钮隐藏带有覆盖的地图，要求用户在屏幕上按下手指并通过滥用切换按钮。显然，当人们因为位置丢失而缩放/平移地图时，这会成为一个问题。

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

我怎样才能允许这种手动地图追踪方法，或者有没有更简单的方法来做我想做的事情？

Answer 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);
}

Answer 2

您不需要 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
});