Fatal编程技术网
  • javascript/
  • Javascript 在圆上添加单击侦听器不起作用

Javascript 在圆上添加单击侦听器不起作用

javascript google-maps-api-3

Javascript 在圆上添加单击侦听器不起作用,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我正在尝试在我的地图上添加click listener，下面是我的代码 更新 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> </head> <style> #map-canvas{ wi

我正在尝试在我的地图上添加click listener，下面是我的代码

更新

<!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>


#地图画布{
宽度：500px；
高度：500px；
}
var城市点={
中心：新google.maps.LatLng（41.878113，-87.629798），
id:0，
地址：“avenue0”，
震级：100000
};
var城市圈；
var infoWindow=new google.maps.infoWindow({
内容：“你好！世界”，
最大宽度：500
});
函数初始化（）{
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（31.2330555556,72.3330555556），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
变量填充选项={
strokeColor:#FF0000“，
频闪不透明度：1，
冲程重量：1，
可点击：正确，
不透明度：0，
地图：地图，
中心：新google.maps.LatLng（31.231867,72.33336），
半径：200000
};
cityCircle=new google.maps.Circle（populationOptions）；
google.maps.event.addListener（城市圈，'click'，函数（ev）{
信息窗口设置位置（电动车床）；
打开（地图）；
});
}
初始化（）；
但这段代码对我不起作用，因为当我点击circle时，infor窗口没有打开。请告诉任何人我在代码中到底缺少了什么。请帮助也许这是
google.maps.event.addDomListener（窗口“加载”，初始化）是缺少的内容。
这是一个有效的例子



我把半径扩大了一点

更新

有效果吗

更新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>




#地图画布{
身高：100%；
宽度：100%；
}
html，正文{
身高：100%；
}    
身体{
保证金：0；
填充：0；
}           
var城市点={
中心：新google.maps.LatLng（41.878113，-87.629798），
id:0，
地址：“avenue0”，
震级：100000
};
var城市圈；
var infoWindow=new google.maps.infoWindow({
内容：“你好！世界”，
最大宽度：500
});
函数初始化（）{
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（31.231867,72.33336），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
变量填充选项={
strokeColor:#FF0000“，
频闪不透明度：1，
冲程重量：1，
可点击：正确，
不透明度：0，
地图：地图，
中心：新google.maps.LatLng（31.231867,72.33336），
半径：200000
};
cityCircle=new google.maps.Circle（populationOptions）；
google.maps.event.addListener（城市圈，'click'，函数（ev）{
信息窗口设置位置（电动车床）；
打开（地图）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

信息窗口！=信息窗口
我已经这样做了，但仍然不起作用，我的意思是这个
infoWindow.setPosition（ev.latLng）；打开（地图）你的主机在说什么？有错误吗？什么更新？我在评论或问题中没有看到任何内容。你是说在代码末尾添加了initialize（）。如果我的代码对您有所帮助，您应该将其标记为已回答，否则至少应该将您的标题标记为已回答closed@user2024024：您的“更新”没有反映此答案。调用initialize在您的“update”中来得太早，因为#map canvas在调用initialize时仍然未知（它在小提琴中工作，因为那里的代码将在加载时执行）。但是，调用
initialize（）
在这里不是问题，因为在您最初的问题中，您说映射已经加载（当调用initialize失败时不会加载）。这样，这个答案并没有解决问题（但提琴解决了问题，因为它修复了拼写错误的信息窗口，正如我在评论中所指出的）先生，我的意思是，根据您的说法，我更新中的代码不适用于Method。这代码只适用于提琴，不适用于网页