如何动态更改谷歌地方服务的半径?

时间:2013-10-18 10:27:16

标签: javascript google-maps-api-3

在变量请求中,我想动态地改变半径,即当我在文本字段中输入诸如1000之类的值时,如果我输入另一个值,它应该是动态变化的,在1000米半径范围内的停车区域应该是明智的。

<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=places">    </script>
<script>
var marker;
var map;
var infowindow = new google.maps.InfoWindow();
var myCenter;
var markers = [];

function initialize() 
{
    myCenter = new google.maps.LatLng(13.052413899999994,80.25065293862303);        
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myCenter,
        zoom: 15
    });
}

function some()
{
    var request = {
    location: myCenter,
    radius: 500,
    types: ['bank']
    };

var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < markers.length; i++) {
           markers[i].setMap(null);
                }
            markers = [];
        for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
        }
    }
}
function createMarker(place)
{
var placeLoc = place.geometry.location;
marker = new google.maps.Marker({
    position: place.geometry.location
});
marker.setIcon({
    url:'bank.png',
    size: new google.maps.Size(70, 71),
    anchor: new google.maps.Point(17, 14),
    scaledSize: new google.maps.Size(35, 35)
    });
marker.setMap(map);

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
});
markers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas" style="width: 50%; float:left"></div>
<div style="width:46%; float:left">
<input type="number" id="inputarea">
<button onclick="some();">Banks</button>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
_uacct = "UA-162157-1";
urchinTracker();
</script> 
</body>
</html>

1 个答案:

答案 0 :(得分:1)

像这样:

function some()
{
  var request = {
    location: myCenter,
    radius: parseInt(document.getElementById('inputarea').value, 10),
    types: ['bank']
  };

  ...
}