谷歌地图API在setcenter之后缩放

时间:2012-08-28 14:13:04

标签: javascript google-maps zoom

我尝试使用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);
    }
  });
}

道歉,如果这是一个简单的问题,我一直在寻找一个简单的答案。

1 个答案:

答案 0 :(得分:2)

地理编码器返回建议的视口

results[0].geometry.viewport

它可用于缩放到对返回的结果有意义的级别

Example