在圈子上添加点击监听器不起作用答案

【问题标题】：adding click listener on circle is not working在圈子上添加点击监听器不起作用
【发布时间】：2013-05-23 07:41:10
【问题描述】：

我正在尝试在我的地图上添加点击监听器，这是我的代码

更新

<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<style>
    #map-canvas{
 width:500px; 
 height:500px;
}
</style>
<script  type="text/javascript">
    var cityPoints = {
        center: new google.maps.LatLng(41.878113, -87.629798),
        id: 0,
        addr: 'avenue0',
        magnitude: 100000
    };

    var cityCircle;
    var infoWindow = new google.maps.InfoWindow({
        content: "<div>Hello! World</div>",
        maxWidth: 500
    });


  function initialize() {
 var mapOptions = {
     zoom: 4,
     center: new google.maps.LatLng(31.2330555556, 72.3330555556),
     mapTypeId: google.maps.MapTypeId.TERRAIN
 };

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

  var populationOptions = {
      strokeColor: "#FF0000",
      strokeOpacity: 1,
      strokeWeight: 1,
      clickable: true,
      fillOpacity: 0,
      map: map,
      center: new google.maps.LatLng(31.231867, 72.33336),
      radius: 200000
  };

  cityCircle = new google.maps.Circle(populationOptions);


    google.maps.event.addListener(cityCircle, 'click', function (ev) {
        infoWindow.setPosition(ev.latLng);
        infoWindow.open(map);
    });
}
initialize();
</script>
<body>
    <div id="map-canvas"></div>
</body>
</html>

但是这个代码对我不起作用，因为当我点击圆圈时，infor 窗口没有打开。请任何人告诉我在我的代码中到底缺少什么。请帮助

【问题讨论】：

infowindow != infoWindow
我已经这样做了，但还是不行
我的意思是infoWindow.setPosition(ev.latLng); infoWindow.open(map);
你的控制台在说什么？有错误吗？

标签： javascript google-maps-api-3

【解决方案1】：

也许这个google.maps.event.addDomListener(window, 'load', initialize); 是缺少的。这是一个工作示例

http://jsfiddle.net/9bnCw/6/

我把半径变大了一点。

更新

this 有效吗？

更新 3

我已将所有内容放在一个文件中，以便您复制和粘贴。

<!DOCTYPE html>
<html> 
    <head>
        <style>
 #map-canvas{ 
 height:100%;
 width:100%;           
}
 html, body {
     height: 100%;
 }    
 body {
     margin:0;
     padding:0;
 }           
        </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script>
            var cityPoints = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  id: 0,
  addr: 'avenue0',
  magnitude: 100000
};

var cityCircle;
var infoWindow = new google.maps.InfoWindow({
        content: "<div>Hello! World</div>",
        maxWidth: 500
    });

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(31.231867, 72.33336),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

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

           var populationOptions = {
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        strokeWeight: 1,
        clickable: true,
        fillOpacity: 0,
        map: map,
        center: new google.maps.LatLng(31.231867, 72.33336),
        radius: 200000
    };
    cityCircle = new google.maps.Circle(populationOptions);

    google.maps.event.addListener(cityCircle, 'click', function(ev) {
            infoWindow.setPosition(ev.latLng);
            infoWindow.open(map);
        });
}
google.maps.event.addDomListener(window, 'load', initialize);

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

【讨论】：

什么更新？我在 cmets 或问题中看不到任何内容
哦，您的意思是您在代码末尾添加了 initialize()。如果我的代码对您有帮助，您应该将其标记为已回答，如果没有，您至少应该将您的标题标记为已关闭
@user2024024：您的“更新”没有反映这个答案。在你的“更新”中调用初始化太早了，因为在你调用初始化时#map-canvas 仍然是未知的（它在小提琴中工作，因为那里的代码将在加载时执行）。但是，initialize() 的调用在这里不是问题，因为在您最初的问题中，您说地图已加载（当初始化调用失败时不会加载）。这样，这个答案并没有解决问题（但小提琴可以，因为它修复了拼写错误的 infoWindow ，如我的评论中所述）
先生，我的意思是根据您的我的更新中的代码对我不起作用
这段代码只是在小提琴中工作而不是在网页上