setcenter后Google Maps API缩放 [英] Google Maps API zoom after setcenter

问题描述

我尝试使用Google地图将位置添加到用户可以创建的事件中.因此，存在一个具有 onclick ="initialize()" 的添加位置"复选框，然后地图和搜索框出现，搜索按钮具有 onclick ="codeAddress()".但是，初始化后的地图的缩放级别设置为10(因为它是整个伦敦)，但是例如当有人输入地址时，我需要将其缩放到适当的级别.

I have attempted to use Google Maps to add locations to events that the user can create. As such there is an "add location" checkbox that has onclick="initialize()", the map and a search box then appear with the search button having onclick="codeAddress()". However the initialized map is set at zoom level 10 (as it's London as a whole) yet when someone enters an address for example, I need it to zoom to an appropriate level.

我觉得这似乎应该更简单一些.我已经阅读过很多有关使用 LatLngBounds()的信息，但是这些示例涉及多个标记，您必须设置SW和NE角，这不确定如何针对不同的搜索进行适当的计算.

I feel as if this should be simpler that it seems. I've read alot about using LatLngBounds() but the examples are for more than one marker and you have to set SW and NE corners which im not sure how to calculate appropriately for different searches.

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);
    }
  });
}

很抱歉，如果这是一个简单的问题，我一直在寻找一个简单的答案已有一段时间.

Apologies if this is a simple question, I've been looking around for a simple answer for a while now.

推荐答案

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

The geocoder returns a suggested viewport

results[0].geometry.viewport

可以将其缩放到对返回的结果有意义的水平

It can be used to zoom to a level that makes sense for the result returned

示例

这篇关于setcenter后Google Maps API缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！