Question

在使用Gmap3和PNG叠加层构建坐标跟踪应用程序时，我遇到了使用PNG图像作为地面叠加层的问题。当click事件在图像范围内时，map元素上的Click事件不会生效。

我尝试在图片元素和父div上使用CSS pointer-events: none，这只是阻止了地图上任何地方的点击事件。我尝试使用切换功能隐藏地图中的div / img，但仍未在界限内点击事件。

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

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

我如何允许这种手动地图追踪方法，还是有更简单的方法来做我想做的事情？

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

Answer 2

对于那些想要在Google Maps v3（而不是gmap3）上捕获地面叠加点击次数的方法，您可以像点击地图一样捕获这些内容：

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

使用Gmap3点击GroundOverlay

2 个答案: