我有一个下拉列表。当我从下拉列表中选择10英里之类的值时,我的Google地图应该显示在该地点10英里范围内。我该怎么做?
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
function myMap() {
var myCenter = new google.maps.LatLng(56.1304, -106.3468);
var mapProp = { center: myCenter, zoom: 6, scrollwheel: true, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker.setMap(map);
}
<div id="googleMap" style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; "></div>
<div id="searchcontainer" style="position: absolute; z-index: 0; left: 450px; top: 0px;">
<select id="range" name="range">
<option value="0">Current Map</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
<option value="15">15 Miles</option>
<option value="20">20 Miles</option>
<option value="25">25 Miles</option>
<option value="50">50 Miles</option>
<option value="100">100 Miles</option>
<option value="250">250 Miles</option>
<option value="500">500 Miles</option>
</select>
</div>
答案 0 :(得分:1)
一种选择是创建具有正确中心和所需半径的google.maps.Circle
,然后调用map.fitBounds(circle.getBounds())
(其中circle
是圆)。
(请注意,圆的半径以米为单位,因此您需要将英里输入转换为米)。
var METERS_PER_MILE = 1609.34;
function myMap() {
var myCenter = new google.maps.LatLng(56.1304, -106.3468);
var mapProp = {
center: myCenter,
zoom: 6,
scrollwheel: true,
draggable: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var circle;
google.maps.event.addDomListener(document.getElementById('range'), 'change', function(evt) {
var value = $("#range").val();
if (circle && circle.setMap) circle.setMap(null);
circle = new google.maps.Circle({
center: myCenter,
radius: value * METERS_PER_MILE,
map: map
});
map.fitBounds(circle.getBounds());
});
}
google.maps.event.addDomListener(window, 'load', myMap);
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#googleMap {
height: 90%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="googleMap"></div>
<div id="searchcontainer" style="position: absolute; z-index: 0; left: 450px; top: 0px;">
<select id="range" name="range">
<option value="0">Current Map</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
<option value="15">15 Miles</option>
<option value="20">20 Miles</option>
<option value="25">25 Miles</option>
<option value="50">50 Miles</option>
<option value="100">100 Miles</option>
<option value="250">250 Miles</option>
<option value="500">500 Miles</option>
</select>
</div>
答案 1 :(得分:0)
您不需要在地图中居中。您可能要做的就是添加一个侦听器,并相应地更改setZoom,但是您需要根据Google Maps API文档更改范围值而不是文本来处理最大缩放值。
var range = document.getElementById("range");
range.addEventListener("change", function() {
map.setZoom(range.value);
});
答案 2 :(得分:0)
<select id="range" name="range">
<option value="0">Current Map</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
<option value="15">15 Miles</option>
<option value="20">20 Miles</option>
<option value="25">25 Miles</option>
<option value="50">50 Miles</option>
<option value="100">100 Miles</option>
<option value="250">250 Miles</option>
<option value="500">500 Miles</option>
</select>
I do not want this i just want default 10 miles what should i need to do