我尝试使用 Google map 将位置添加到用户可以创建的事件中。因此，有一个包含 onclick="initialize()" 的“添加位置”复选框，然后会出现 map 和搜索框，其中包含包含 onclick="codeAddress()"的搜索按钮。然而，初始化的 map 设置为缩放级别 10(因为它是整个伦敦)，但是当有人输入地址时，例如，我需要将其缩放到适当的级别。
我觉得这应该比看起来更简单。我读过很多关于使用 LatLngBounds() 的内容，但这些示例适用于多个标记，您必须设置西南 Angular 和东北 Angular ，我不确定如何针对不同的搜索正确计算。
var geocoder;
var map;
var markersArray = [];
function initialize() {
var locationStart = new google.maps.LatLng(51.5073346, -0.12768310000001293);
geocoder = new google.maps.Geocoder();
var myOptions = {
center: locationStart,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: locationStart,
map: map
});
markersArray.push(marker);
}
// Function to remove markers
function clearOverlays() {
if(markersArray) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
}
}
// Function to search addresses and generate a list of the other options returned
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode({
'address': address,
'region' : 'uk'
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var divTest = document.getElementById("results");
divTest.innerHTML = "";
if (results.length > 1) {
$('#addressOptions').show();
for (var i=0; i<results.length; i++) {
divTest.innerHTML += "<tr><td id=\"address"+ i + "\" onclick=\"grabLocation(" + i + ")\" >" + results[i].formatted_address + "</td></tr>";
};
} else {
$('#addressOptions').hide();
}
divTest.innerHTML += "";
var marker = new google.maps.Marker({
'map' : map,
'position' : results[0].geometry.location,
'preserveViewport' : false
});
map.setCenter(results[0].geometry.location);
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
抱歉，如果这是一个简单的问题，我已经寻找一个简单的答案有一段时间了。
最佳答案
地理编码器返回建议的视口(viewport)
results[0].geometry.viewport
它可用于缩放到对返回结果有意义的级别
代码片段:
// modified from http://www.weltmeer.ch/divelog/
// globals
var map = null;
var geocoder = null;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(47.288828765662416, 7.945261001586914),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
findAddress("United States");
}
function findAddress(address) {
var addressStr = document.getElementById("stateselect").value;
if (!address && (addressStr != ''))
address = "State of " + addressStr;
else
address = addressStr;
if ((address != '') && geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
if (results && results[0] &&
results[0].geometry && results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#map_canvas {
height: 90%;
}
#TOPNAV {
height: 10%;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Zoom to State with Select List (Google Maps API)</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
</script>
</head>
<body onload="initialize()">
<div id="TOPNAV">
<select id="stateselect" name="countryselect" class="textfeld" onclick="findAddress();return false" onchange="findAddress();return false" onfocus="">
<option value=''>Select a State....</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>
<div id="map_canvas"></div>
</body>
</html>关于javascript - 设置中心后的 Google map API 缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12161203/