如何在Google Maps API上添加標記圓圈

Question

這是我用來在谷歌地圖中的多個地方顯示標記的代碼。 我想補充一點，並在標記周圍添加一個5公里的圓圈。

我試圖加入的代碼塊沒有運氣：

var circle = new google.maps.Circle({ 
center:position, 
radius: radius, 
fillColor: "#0000FF", 
fillOpacity: 0.1, 
map: map, 
strokeColor: "#FFFFFF", 
strokeOpacity: 0.1, 
strokeWeight: 2 
}); 

這是下面的完整代碼，並在這裏參考

var center = "Vilnius, Lithuania"; 
var locations = [ 
    ['Tuskulėnų g. 20, Vilnius 09211, Lithuania', "some info"], 
    ['Stumbrų g. 21, Vilnius 08101, Lithuania', "more information"], 
    ['Kalvarijų g. 55, Vilnius 09317, Lithuania', "blah, blah"], 
    ['Birželio 23-iosios g. 6, Vilnius 03204, Lithuania', "other information"], 
    ['Teatro g. 6, Vilnius 03107, Lithuania', "to be determined"] 
]; 


var geocoder; 
var map; 
var infoWin = new google.maps.InfoWindow(); 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    map = new google.maps.Map(
    document.getElementById("map_canvas")); 
    // center and zoom map on "center" address 
    geocoder.geocode({ 
    address: center 
    }, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.fitBounds(results[0].geometry.bounds); 
    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
    }); 
    for (var i = 0; i < locations.length; i++) { 
    codeAddress(locations[i], i); 
    } 

} 

function codeAddress(location, i) { 
    geocoder.geocode({ 
    'address': location[0] 
    }, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
     map: map, 
     title: "marker " + i, 
     position: results[0].geometry.location 
     }); 
     google.maps.event.addListener(marker, 'click', function(evt) { 
     infoWin.setContent(location[0] + "<br>" + location[1]); 
     infoWin.open(map, this); 
     }) 


//i added this block 
var circle = new google.maps.Circle({ 
center:position, 
radius: radius, 
fillColor: "#0000FF", 
fillOpacity: 0.1, 
map: map, 
strokeColor: "#FFFFFF", 
strokeOpacity: 0.1, 
strokeWeight: 2 
}); 
//end of block addition 

    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, "load", initialize); 

更新的jsfiddle

這是我從控制檯

radius is not defined 

Answer 1

你剛纔定義radius和position變量，如獲得：

var radius = 1000; 
var position = marker.getPosition(); 

而對於塔放大您可以使用map.setZoom();，setCenter例如後添加它：

map.setCenter(results[0].geometry.location); 
map.setZoom(5); 

Working fiddle。

---

代碼片段：

var center = "Vilnius, Lithuania"; 
 
var locations = [ 
 
    ['Tuskulėnų g. 20, Vilnius 09211, Lithuania', "some info"], 
 
    ['Stumbrų g. 21, Vilnius 08101, Lithuania', "more information"], 
 
    ['Kalvarijų g. 55, Vilnius 09317, Lithuania', "blah, blah"], 
 
    ['Birželio 23-iosios g. 6, Vilnius 03204, Lithuania', "other information"], 
 
    ['Teatro g. 6, Vilnius 03107, Lithuania', "to be determined"] 
 
]; 
 

 

 
var geocoder; 
 
var map; 
 
var infoWin = new google.maps.InfoWindow(); 
 

 
function codeAddress(location, i) { 
 
    geocoder.geocode({ 
 
    'address': location[0] 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     map.setCenter(results[0].geometry.location); 
 
     map.setZoom(5); 
 

 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     title: "marker " + i, 
 
     position: results[0].geometry.location 
 
     }); 
 
     google.maps.event.addListener(marker, 'click', function(evt) { 
 
     infoWin.setContent(location[0] + "<br>" + location[1]); 
 
     infoWin.open(map, this); 
 
     }) 
 

 
     var radius = 1000; 
 
     var position = marker.getPosition(); 
 

 
     var circle = new google.maps.Circle({ 
 
     center: position, 
 
     radius: radius, 
 
     fillColor: "#0000FF", 
 
     fillOpacity: 0.1, 
 
     map: map, 
 
     strokeColor: "#FFFFFF", 
 
     strokeOpacity: 0.1, 
 
     strokeWeight: 2 
 
     }); 
 

 
    } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
    } 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", function() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas")); 
 
    // center and zoom map on "center" address 
 
    geocoder.geocode({ 
 
    address: center 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     google.maps.event.addListenerOnce(map, 'bounds_changed', function() { 
 
     map.setZoom(map.getZoom() + 3); 
 
     }); 
 
     map.fitBounds(results[0].geometry.bounds); 
 

 
    } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
    } 
 
    }); 
 

 
    for (var i = 0; i < locations.length; i++) { 
 
    codeAddress(locations[i], i); 
 
    } 
 
});

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>