0

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

申し訳ありませんが、これが単純な質問である場合、私はしばらくの間、簡単な答えを探していました。

4

1 に答える 1

2

ジオコーダーは提案されたビューポートを返します

results[0].geometry.viewport

返される結果に意味のあるレベルにズームするために使用できます

例

于 2012-08-28T15:58:01.760 に答える