1

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

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

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

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

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

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

4

2 回答 2

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 回答
1

你不需要2张地图。latLng 不可用于 gmap3-groundoverlay 的点击事件，但可用于 native 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 回答