当我点击圈子谷歌地图时显示消息?

时间:2014-05-12 21:33:58

标签: javascript google-maps draw

我在我的网站上绘制谷歌地图。在我的数据库中,我有坐标...我想得到这个坐标并在DB中绘制圆形的foreah记录。当我绘制圆圈时,我想点击它来显示文字......这是我绘制圆圈的代码

    <script>
// This example creates circles on the map, representing
// populations in the United States.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2842518
};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8143197
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  population: 3844829
};
var cityCircle;

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

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

  // Construct the circle for each value in citymap.
  // Note: We scale the population by a factor of 20.
  for (var city in citymap) {
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: citymap[city].population / 20
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

我的问题是当我点击地图中的任何圆圈时如何显示消息?

2 个答案:

答案 0 :(得分:0)

Google Maps API文档shows how to open an infowindow。您可以在cityCircle定义之后放置的简化示例:

google.maps.event.addListener(cityCircle, 'click', function() {
  new google.maps.InfoWindow({content: 'hello!'}).open(map, cityCircle);
});

答案 1 :(得分:0)

你应该可以这样做:

google.maps.event.addListener(cityCircle, 'click', function() {
    alert('you message goes here');
});