Question

问题：我想在Google地图中点击圆形标记来获取信息窗口。

我的代码：

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Circle Simple</title>

<style type="text/css">
#map_canvas {
    height: 100%
}
</style>

<script src="https://maps.googleapis.com/maps/api/js?&sensor=false"
    type="text/javascript">
</script>

<script type="text/javascript">

var citymap = {};
citymap['Yelahanka'] = {
  center: new google.maps.LatLng(13.133754,77.585784),
  population: 2842518
};
citymap['Dodaballarpur'] = {
  center: new google.maps.LatLng(15.133754,77.585784),
  population: 8143197
};
citymap['Mekricircle'] = {
  center: new google.maps.LatLng(16.133754,77.585784),
  population: 3844829
}
var cityCircle;

function initialize() {
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(13.133754,77.585784),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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


  var contentString = '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
  '<div id="bodyContent">'+
  '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
  'sandstone rock formation in the southern part of the '+
  'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
  'south west of the nearest large town, Alice Springs; 450&#160;km '+
  '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
  'features of the Uluru - Kata Tjuta National Park. Uluru is '+
  'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
  'Aboriginal people of the area. It has many springs, waterholes, '+
  'rock caves and ancient paintings. Uluru is listed as a World '+
  'Heritage Site.</p>'+
  '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
  'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
  '(last visited June 22, 2009).</p>'+
  '</div>'+
  '</div>';




  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  for (var city in citymap) {

    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 6,
      fillColor: '#669999',
      fillOpacity: 0.45,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population / 200
    };
    cityCircle = new google.maps.Circle(populationOptions);
  }

  google.maps.event.addListener(populationOptions,'click', function() {
      alert("i am here in this infowindow");
      infowindow.open(map,populationOptions );
    });
}

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
    <div id="map_canvas"></div>
</body>
</html>

当我点击圆形标记时，它没有响应，我也没有得到任何信息。在上面的代码中，我试图在infowindow周围创建一个动态圆圈，显示点击圆形区域的一些细节。

Answer 1

您传递给事件侦听器的对象似乎不正确。请使用以下代码在'cityCircle'上附加onClick事件。

google.maps.event.addListener(cityCircle,'click', function() {
      alert("i am here in this infowindow");
      infowindow.open(map,populationOptions );
    });

Answer 2

请使用以下代码创建infoWindow。在Loc变量中，通过传递infowindow需要打开的经度和纬度参数来生成位置。

var Loc = new google.maps.LatLng(latitude,longitude);
        var INFO_WINDOW_WIDTH = 352;                                
        var infowindow = new google.maps.InfoWindow({
        position :Loc,
        maxWidth: INFO_WINDOW_WIDTH
        });
        google.maps.event.addListener(cityCircle,'click', function() {
                                                infowindow.close();
    infowindow.setContent(contentString);
                                                infowindow.setOptions({pixelOffset: new google.maps.Size(0,0)});
                                                infowindow.open(map,this);
             });

Infowindow for Google Map中的圆形标记

2 个答案: