0

我有以下代码，基于 API 示例之一。单击地图会创建一个标记。单击标记会打开一个信息窗口。现在我想点击信息窗口做一些事情。例如，在任何地方单击可能会关闭它，而不是角落里的小十字架。或者单击它可能会打开一个新 URL。等等。

不幸的是，信息窗口似乎没有“点击”事件。

我得到的最接近的显示为下面的注释行：我将我的信息窗口内容包装在一个 div 中，并给它一个onClick. 这行得通，但它周围有一个很大的边界。我真的希望能够单击信息窗口框中的任何位置。

有办法吗？

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Click Test</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
google.maps.visualRefresh = true;   //New look visuals.

function initialize() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map-canvas");

  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '400px';
    mapdiv.style.height = '600px';
  }

  var mapOptions = {
    zoom:3,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map
        });
    var infowindow = new google.maps.InfoWindow({
        //content: "<div onClick='test1()'>(lat,lng):<br/>"+location.lat()+","+location.lng()+"</div>"
        content: "(lat,lng):<br/>"+location.lat()+","+location.lng()
        });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(marker.get('map'), marker);
        infowindow.addListener('click',test1);  //Does nothing
        });

    }

}

google.maps.event.addDomListener(window, 'load', initialize);

function test1(){alert("test1");}

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

更新： 这张图片显示了当我div在内容中使用可点击时出现的问题（背景设置为红色以显示我可以点击的区域的范围，也可以设置样式；如果我设置负边距，我只会得到滚动条，不是更大的区域！）。这是我想要点击的整个白色区域，而不仅仅是那个红色矩形。 在此处输入图像描述

4

1 回答 1

2

我决定使用Google Maps Utility Library中的 InfoBox 。所以在标题中添加一个指向库的链接。然后用这一行替换该new google.maps.InfoWindow()行：

var infowindow = new InfoBox({
    closeBoxURL:"",
    content: '<div onClick="test1();return false;" style="background:white;opacity:0.8;padding:8px">(lat,lng):<br/>'+
        location.lat()+","+location.lng()+"</div>"
    });

通过将 closeBoxUrl 设置为空白字符串，我没有关闭选项。我添加了一个大的填充，以便您可以看到单击边缘确实有效。

你也可以这样做。我还使用了 boxClass 选项，因此格式化是在 CSS 中完成的：

var infoContent=document.createElement('div');
infoContent.innerHTML="(lat,lng):<br/>"+location.lat()+","+location.lng();
infoContent.onclick=test1;
var infowindow = new InfoBox({
    closeBoxURL:"",
    boxClass:"marker_popup",
    content: infoContent,
    });

（此外，如果这样做，仅在某些浏览器上，它会在 InfoBox 下方创建一个标记！最简单的解决方法是进行更改test1，使其看起来像function test1(event){alert("test1");event.preventDefault();return false;}：）

PS 我选择 InfoBox 而不是 InfoBubble，因为后者没有文档，而且它没有明显的优势来弥补这个主要缺陷！InfoBox 有文档和参考。（链接适用于 1.1.9 版）

于 2013-05-27T02:34:19.143 回答