加载地图和标记后，更改选择框上的谷歌地图位置

Question

如何更改谷歌地图位置，以便在选择框更改时另一个经纬度坐标位于谷歌地图的中心。地图和标记已成功加载。唯一要更改的是，假设从选择框中选择已加载的地图时，将其滚动到正确的城市。不应更改标记的坐标。

<select>
  <option value="1" selected>NYC</option>
  <option value="2">Chicago</option>
  <option value="3">Boston</option>
</select>

<div class="map-container">
    <div id="map"></div><!--the google map is loaded already-->
</div>

Answer 1

如果您有下拉城市位置的坐标，请使用它们。如果没有，您可以使用地理编码器（如果您提供它识别的名称）：

代码 sn-p：

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"));
  var geocoder = new google.maps.Geocoder();
  $("#dropdown").change(function() {
    address = $("#dropdown :selected")[0].text;
    geocodeAddress(address, geocoder, map);
  });
  var address = $("#dropdown :selected")[0].text;
  geocodeAddress(address, geocoder, map);
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(address, geocoder, resultsMap) {
  document.getElementById('info').innerHTML = address;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.fitBounds(results[0].geometry.viewport);
      document.getElementById('info').innerHTML += "<br>" + results[0].geometry.location.toUrlValue(6);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

html,
body,
#map,
.map-container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="1" selected>New York City</option>
  <option value="2">Chicago</option>
  <option value="3">Boston</option>
  <option value="4">Palo Alto</option>
  <option value="5">Seattle</option>
</select>
<div id="info"></div>
<div class="map-container">
  <div id="map"></div>
  <!--the google map is loaded already-->
</div>