我尝试使用Google地图向用户可以创建的活动添加位置。因此,有一个“添加位置”复选框,其中包含onclick="initialize()"
,然后会显示地图和搜索框,搜索按钮会显示onclick="codeAddress()"
。然而,初始化的地图设置为缩放级别10(因为它是整个伦敦)但是当有人输入地址时,我需要它缩放到适当的级别。
我觉得这似乎应该更简单。我已经阅读了很多关于使用LatLngBounds()
的内容,但这些示例适用于多个标记,您必须设置SW和NE角落,我们不确定如何针对不同的搜索进行适当的计算。
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);
}
});
}
道歉,如果这是一个简单的问题,我一直在寻找一个简单的答案。