5

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

更新

<!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 窗口没有打开。请任何人告诉我在我的代码中到底缺少什么。请帮助

4

1 回答 1

5

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

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

我把半径变大了一点。

更新

这行得通吗？

更新 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>
于 2013-05-23T10:39:15.070 回答