Javascript 谷歌地图信息窗口与形状

所以我基本上是从数据库中提取一个lat和lng，用这些坐标在地图上画一个圆

除了我的信息窗口在填充正确信息的同时出现在完全相同的圆圈上，而不是我正在单击的圆圈上之外，一切都正常工作

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

<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);

var map=new google.maps.map（document.getElementById（'map'）{
mapTypeId:google.maps.mapTypeId.TERRAIN
});
var markerBounds=new google.maps.LatLngBounds（）；
var cityLocation；
cityLocation=newgoogle.maps.LatLng（，）；
//为每个随机点绘制一个标记
var circle=new google.maps.circle({
中心：城市定位，
半径：，
职位：城市定位，
strokeColor:#222“，
笔划不透明度：0.1，
冲程重量：2，
fillColor:#ff0007“，
填充不透明度：0.2，
可点击：正确，
地图：地图
});
circle.info=new google.maps.InfoWindow({
内容：“”
});
google.maps.event.addListener（圆圈，'click'，function（）{
此.info.open（地图、圆圈）；
});
//使用每个随机点扩展markerBounds。
扩展标记边界（城市位置）；
//方法将贴图设置为适合markerBounds
地图边界（markerBounds）；

改变

this.info.open（地图、圆圈）

到

this.info.open（地图，this）
要在非标记的内容上打开信息窗口，需要设置信息窗口的位置（不要使用.open（map，anchor）语法）


工作示例修改自

相关问题：

代码片段：


var infowindow=new google.maps.infowindow（）；
函数初始化（）{
//创建地图。
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（37.09024，-95.712891），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
//为城市地图中的每个值构建圆。
//注：我们根据人口来缩放圆的面积。
用于（城市地图中的var城市）{
变量填充选项={
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图，
中心：城市地图[城市]。中心，
半径：Math.sqrt（城市地图[城市].人口）*100，
信息：“姓名：”+citymap[city]。姓名+”
人口：“+citymap[city]。人口+”
“+citymap[city]。信息
};
//将该城市的圆圈添加到地图中。
var circle=new google.maps.circle（populationOptions）；
google.maps.event.addListener（圆圈，'click'，函数（evt）{
infowindow.setContent（this.info）；
infowindow.setPosition（this.getCenter（））；
打开（地图）；
});
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
//此示例在地图上创建圆，表示
//北美洲的人口。
//首先，为每个城市创建一个包含LatLng和人口的对象。
var citymap={}；
城市地图[“芝加哥”]={
中心：新google.maps.LatLng（41.878113，-87.629798），
人口：2714856，
姓名：“伊利诺伊州芝加哥”，
信息：“信息窗口的内容”
};
城市地图[纽约]={
中心：新google.maps.LatLng（40.714352，-74.005973），
人口：8405837，
名称：“纽约州纽约市”，
信息：“信息窗口的内容”
};
城市地图[洛杉矶]={
中心：新google.maps.LatLng（34.052234，-118.243684），
人口：3857799，
名称：“加利福尼亚州洛杉矶”，
信息：“信息窗口的内容”
};
城市地图[“温哥华”]={
中心：新google.maps.LatLng（49.25，-123.1），
人口：603502，
名称：“不列颠哥伦比亚省温哥华”，
信息：“信息窗口的内容”
};
var城市圈
html，
身体，
#地图画布{
高度：500px；
宽度：500px；
边际：0px；
填充：0px
}
您使用setContent（）和setPosition（）序列将真正的问题放在中间。好极了！
google.maps.event.addListener(circle, 'click', function (evt) {
  infowindow.setContent(this.info);
  infowindow.setPosition(this.getCenter());
  infowindow.open(map);
});