[英]Google Maps Infowindows with shapes
So I am basically pulling a lat and lng from a database and using those coordinates plotting a circle on the map.所以我基本上是从数据库中提取一个 lat 和 lng 并使用这些坐标在地图上绘制一个圆圈。
All is working well with the exception that my infoWindow, while populating the correct information, is popping up over the exact same circle, not the one that I am clicking on.一切都运行良好,除了我的 infoWindow 在填充正确信息时弹出完全相同的圆圈,而不是我点击的那个圆圈。
I have read several articles here but can't seem to find what it is I am doing wrong.我在这里阅读了几篇文章,但似乎无法找到我做错了什么。
<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);
To open an infowindow on something that isn't a marker, you need to set the position of the infowindow (and not use the .open(map, anchor) syntax).要在不是标记的东西上打开信息窗口,您需要设置信息窗口的位置(而不是使用 .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概念证明小提琴
Working example modified from google's circle example从谷歌的圆圈示例修改的工作示例
Related question: Problems in Creating InfoWindow on each individual circle with mouseover using Google Map API相关问题: Problems in Creating InfoWindow on each individual circle with mouseover using Google Map API
code snippet:代码片段:
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>
change改变
this.info.open(map, circle);
to至
this.info.open(map, this);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.