javascript - 谷歌地图 addListener 不起作用

标签 javascript google-maps google-maps-api-3

在下面的 HTML 代码中,我希望在 map 更改(例如缩放、拖动、单击)时收到警报。

该警报将来将更改为在拖动、缩放或单击时显示 Angular 坐标。然后,“获取 Angular 落”按钮将被省略(现在完美)。

我尝试了很多网站的建议。但仍然没有成功。

警报的 addListener 不起作用。使用 addDomListener 也不起作用。这段代码的罪魁祸首是什么?

提前感谢您的帮助!

<!DOCTYPE html>
<html>
<head> 
</head>      
<script src="http://maps.googleapis.com/maps/api/js">
</script>

<body>
<script>
   var map;
   function initialize()
   {
    var mapOpt = {center:new google.maps.LatLng(41.5,2.0),zoom:10, mapTypeId:google.maps.MapTypeId.SATELLITE};
    map=new google.maps.Map(document.getElementById("googleMap"),mapOpt); 
   };
</script>

<script>
  function getCorners()
  {
   var bounds = map.getBounds();
   var ne = bounds.getNorthEast(); 
   var sw = bounds.getSouthWest();
   document.getElementById('ne').innerHTML = ne;
   document.getElementById('sw').innerHTML = sw;
  }
</script>

<! THIS addListener SCRIPT DOES NOT WORK>
<script>
  google.maps.event.addListener(map, 'idle', function()
  {
   window.alert("Map clicked");
  });
</script>

<script>
  google.maps.event.addDomListener(window, "load", initialize);  
</script>
<p id="ne">NE</p>
<p id="sw">SW</p>
<button onclick="getCorners()">Get Corners</button> 

<br><br> 
<div id="googleMap" style="width:500px;height:500px"></div>
</body> 
</html>   

最佳答案

这是因为 google.maps.event.addListener 在浏览器了解您的 map 对象之前就被调用了。可能还有控制台错误。 将此代码放入 initialize() 然后它应该可以工作。

通常建议在定义所有 HTML 元素(包括例如持有 map 的 div。而且脚本的分割有点令人困惑,而且似乎没有必要。

关于javascript - 谷歌地图 addListener 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39681072/

相关文章:

Android - 使用谷歌地图实时跟踪定位设备

google-maps - 谷歌地图嵌入网站没有弹出窗口

javascript - 通过协会更新水线

javascript - 如何覆盖 Google Chrome 的计算样式

security - 保护 KML 文件不被下载或访问

javascript - Google map API - 使用 Infowindow 控制位置

javascript - fitBounds 未正确居中

google-maps - GeoReference tiff 图像到谷歌地图?

javascript - 使用 jquery 动态调整表大小

javascript - 超时时间为 0 是否足够长?