Question

我有以下代码，基于其中一个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时，此图像显示问题（背景设置为红色以显示我可以点击的区域范围，以及我可以设置样式;如果我设置负边距我只是得到滚动条，而不是更大的区域！）。这是我想要点击的整个白色区域，而不仅仅是那个红色矩形。 enter image description here

Answer 1

我决定使用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;}）

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

如何使信息窗口可点击？

1 个答案: