我正在尝试在Google地图中创建一个圆圈,显示圆圈半径区域内的标记,当地图移动时,圆圈将会跟随。像这个例子:
我遇到的问题如下:
我没有获得圆形区域,而是获得了一个矩形区域,我正在使用的代码如下:
var myCity = new google.maps.Circle({
center: {lat: 38.7196268, lng: -9.1457501},
radius: 15000,
strokeColor: "rgb(0,0,0)",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "rgb(0,0,0)",
fillOpacity: 0.4
});
myCity.setMap(map);
var bounds = myCity.getBounds();
var it = 0;
for (var i = 0; i <=ct; i++) {
it=it+1;
if(bounds.contains(coordinate[it])){
marker[it].setVisible(true);
}
else{
marker[it].setVisible(false);
}
}
ct是一个动态变量,现在有207个值。
以下是地图的完整脚本:
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 38.7196268, lng: -9.1457501},
disableDefaultUI: true,
zoomControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false
});
var ct=0;
var coordinate = [];
var marker = [];
var htmlString = "<?php while($row = $result->fetch_assoc()) { ?>";
ct++;
var rowGPSLon = "<?php echo $row['GPSLon']; ?>";
var rowGPSLat = "<?php echo $row['GPSLat']; ?>";
var pageID = "<?php echo $row['ID']; ?>";
rowGPSLon = parseFloat(rowGPSLon);
rowGPSLat = parseFloat(rowGPSLat);
coordinate[ct] = {lat: parseFloat(rowGPSLat), lng: parseFloat(rowGPSLon)};
marker[ct] = new google.maps.Marker({
position: coordinate[ct],
map: map,
url: "http://localhost?id=" + pageID,
});
var htmlString2 = "<?php } ?>";
var myCity = new google.maps.Circle({
center: {lat: 38.7196268, lng: -9.1457501},
radius: 15000,
strokeColor: "rgb(0,0,0)",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "rgb(0,0,0)",
fillOpacity: 0.4
});
myCity.setMap(map);
//Retrive the center location
google.maps.event.addListener(map, "center_changed", function() {
var center = map.getCenter().toUrlValue().split(",");
myCity.setCenter({lat: parseFloat(center[0]), lng: parseFloat(center[1])});
var bounds = myCity.getBounds();
var it = 0;
for (var i = 0; i <=ct; i++) {
it=it+1;
if(bounds.contains(coordinate[it])){
marker[it].setVisible(true);
}
else{
marker[it].setVisible(false);
}
}
});
var bounds = myCity.getBounds();
var it = 0;
for (var i = 0; i <=ct; i++) {
it=it+1;
if(bounds.contains(coordinate[it])==false){
marker[it].setVisible(false);
}
google.maps.event.addListener(marker[it], 'click', function() {
jQuery(".mapLoad").load(this.url);
jQuery(".mapLoadContainer").show(1000);
});
}
}
</script>
我的问题是,如何获得圆形区域而不是矩形区域。