带有形状的 Google 地图信息窗口

Question

所以我基本上是从数据库中提取 lat 和 lng 并使用这些坐标在地图上绘制一个圆圈。

除了我的 infoWindow 在填充正确的信息时，它在完全相同的圆圈上弹出，而不是我单击的那个圆圈之外，一切都运行良好。

我在这里阅读了几篇文章，但似乎无法找到我做错了什么。

<script type="text/javascript">


var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.TERRAIN
});

var markerBounds = new google.maps.LatLngBounds();

var cityLocation;


<?php foreach($allResults as $key =>$singleResult): ?>

cityLocation = new google.maps.LatLng(<?php echo $singleResult["lat"] ?>, <?php echo $singleResult["lng"] ?>);



// Draw a marker for each random point
 var circle = new google.maps.Circle({
    center: cityLocation,
    radius: <?php echo $meters ?>,
    position: cityLocation,
    strokeColor: "#222",
    strokeOpacity: 0.1,
    strokeWeight: 2,
    fillColor: "#ff0007",
    fillOpacity: 0.2,
    clickable:true,
    map: map
});

circle.info = new google.maps.InfoWindow ({
   content:'<?php echo "Lat: " . $singleResult["lat"] . " " . "Lng: " . $singleResult["lng"] ?> '
});

google.maps.event.addListener(circle,'click',function() {
    this.info.open(map, circle);
});



// Extend markerBounds with each random point.
markerBounds.extend(cityLocation);

<?php endforeach; ?>

// Map.fitBounds() method to set the map to fit markerBounds
map.fitBounds(markerBounds);

Answer 1

要打开非标记的信息窗口，您需要设置信息窗口的位置（而不是使用 .open(map, anchor) 语法）。

google.maps.event.addListener(circle, 'click', function (evt) {
  infowindow.setContent(this.info);
  infowindow.setPosition(this.getCenter());
  infowindow.open(map);
});

proof of concept fiddle

工作示例修改自 google's circle example

相关问题：Problems in Creating InfoWindow on each individual circle with mouseover using Google Map API

代码 sn-p：

var infowindow = new google.maps.InfoWindow();

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 area of the circle based on the population.
  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: Math.sqrt(citymap[city].population) * 100,
      info: 'name: ' + citymap[city].name + "<br>population: " + citymap[city].population + "<br>" + citymap[city].info
    };
    // Add the circle for this city to the map.
    var circle = new google.maps.Circle(populationOptions);

    google.maps.event.addListener(circle, 'click', function(evt) {
      infowindow.setContent(this.info);
      infowindow.setPosition(this.getCenter());
      infowindow.open(map);
    });

  }
}
google.maps.event.addDomListener(window, 'load', initialize);
// This example creates circles on the map, representing
// populations in North America.

// 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: 2714856,
  name: "Chicago, IL",
  info: "stuff for infowindow"

};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8405837,
  name: "New York, NY",
  info: "stuff for infowindow"
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  population: 3857799,
  name: "Los Angeles, CA",
  info: "stuff for infowindow"
};
citymap['vancouver'] = {
  center: new google.maps.LatLng(49.25, -123.1),
  population: 603502,
  name: "Vancouver, BC",
  info: "stuff for infowindow"
};

var cityCircle;

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Answer 2

改变

this.info.open(map, circle);

到

this.info.open(map, this);