谷歌地图信息导入与形状 [英] Google Maps Infowindows with shapes

问题描述

因此，我基本上是从数据库中拉出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]？>）; 
 
 
 
 //为每个随机点绘制一个标记
 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 echoLat：。$ singleResult [lat]。。Lng ：。$ singleResult [lng]？>'
}）; 
 
 google.maps.event.addListener（circle，'click'，function（）{
 this.info.open（map，circle）; 
}）; 
 
 
 
 //用每个随机点扩展markerBounds。 
 markerBounds.extend（cityLocation）; 
 
<？php endforeach; ？> 
 
 // Map.fitBounds（）方法将地图设置为适合markerBounds 
 map.fitBounds（markerBounds）; 
  

解决方案

更改

this.info.open（map，circle）;

到

this.info.open（map，this）;

So I am basically pulling a lat and lng from a database and using those coordinates plotting a circle on the map.

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.

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

解决方案

change

this.info.open(map, circle);

to

this.info.open(map, this);

这篇关于谷歌地图信息导入与形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！