javascript - 如何根据从下拉菜单中选择的城市显示 Google map

Question

我需要根据所选地点显示 map 。我需要知道如何根据下拉菜单更改 map 。这是我到目前为止所拥有的，但我似乎无法弄清楚如何使用下拉列表中的选择来实际更改 map 。我在这里完全一片空白。非常感谢任何引用或帮助。这是我目前拥有的代码。

<script>
    function myMap() {
        var mapCanvas = document.getElementById("map");
        var mapOptions = {  
        center: new google.maps.LatLng(40.685646, -76.195499), zoom: 10 
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
}

</script>

<div>
    <h2>Please Choose a City</h2>
</div>
<form>
    <fieldset>
        <label>
            Cities
        </label>
        <select id="myCity" name="myCity">
            <option value="None">Select a City</option>
            <option value="PHI">Philadelphia, PA</option>
            <option value="NYC">New York, NY</option>
            <option value="HAR">Hartford, CT</option>
        </select>
    </fieldset>
</form>

Answer 1

只需按城市键存储坐标即可。当 select 更改时，获取值，获取坐标并使用这些坐标调用方法 setCenter _{( docs )}。

如果有不清楚的地方，请告诉我。

var map;
function myMap() {
  var mapCanvas = document.getElementById("map");
  var mapOptions = {  
    center: new google.maps.LatLng(40.685646, -76.195499), 
    zoom: 10 
  };
  map = new google.maps.Map(mapCanvas, mapOptions);
}

myMap();

var coords = {
  'PHI': '39.953050,-75.163961',
  'NYC': '40.875597,-77.776226',
  'HAR': '41.763633,-72.682662'
};

function changeMap(city) {
  var c = coords[city].split(',');
  map.setCenter(new google.maps.LatLng(c[0], c[1]));
}

#map {
  height: 200px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div>
  <h2>Please Choose a City</h2>
</div>
<form>
  <fieldset>
    <label>
      Cities
    </label>
    <select id="myCity" name="myCity" onchange="changeMap(this.value)">
      <option value="None">Select a City</option>
      <option value="PHI">Philadelphia, PA</option>
      <option value="NYC">New York, PA</option>
      <option value="HAR">Hartford, CT</option>
    </select>
  </fieldset>
</form>
<div id="map"></div>

http://output.jsbin.com/suhiveb