如何根据从下拉菜单中选择的城市显示谷歌地图答案

【问题标题】：How to display a Google Map based on City selected from a Dropdown Menu如何根据从下拉菜单中选择的城市显示谷歌地图
【发布时间】：2016-12-07 12:24:44
【问题描述】：

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

<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>

【问题讨论】：

我认为您需要添加坐标作为选项的值，并在每次选择城市时重新加载地图。你试过什么？您问题中的代码似乎不多。
阅读这篇文章stackoverflow.com/questions/32693958/…@Brandy Kimmel
我有坐标，只是不知道如何添加。这些是每个城市的纬度和经度： latLong 代表 PHI (39.95228, -75.16245) latLong 代表 NYC (40.712784, -74.005941) latLong 代表 HAR (41.763711, -72.685093)
你可以使用 Jquery 吗？ @Brandy Kimmel
你是在问我是否知道如何使用 jQuery，或者是否允许我使用 jQuery？

标签： javascript html google-maps google-maps-api-3

【解决方案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

【讨论】：

我相信这是最接近我想要实现的目标。我只是在用值找出第二个函数时遇到了麻烦。
the second function with the values 什么意思？什么麻烦？
这是我从昨天开始一直在尝试做的事情。在看到您的代码之前，我只是不确定如何使其工作。显然我仍然不知道如何让它工作。我不确定我做错了什么。无论我做什么，我都无法让它在我的系统上运行。我完全理解你的代码。我只是出于某种原因无法使其工作。我什至删除了我拥有的所有内容，并直接复制并粘贴了您拥有的所有内容，但它对我不起作用。
console 有错误吗？哪个部分不工作？地图不显示？下拉菜单的更改事件是否未触发？还是取坐标并根据地图中心设置的部分？
地图没有显示，我得到一个错误changeMap is undefined。

【解决方案2】：

一种选择是使用地理编码器将地图缩放到适合城市的范围：

<select id="myCity" name="myCity" onchange="geocodeAddress(this.value);">
  <option value="None">Select a City</option>
  <option value="Philadelphia, PA">Philadelphia, PA</option>
  <option value="New York, NY">New York, NY</option>
  <option value="Hartford, CT">Hartford, CT</option>
</select>

function geocodeAddress(address) {
    geocoder.geocode({'address': address}, function(results, status) {
      if (status === 'OK') {
        if (results[0].geometry.viewport) { 
        map.fitBounds(results[0].geometry.viewport);
        } else {
        map.fitBounds(results[0].geometry.bounds);
        } 
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

proof of concept fiddle

代码 sn-p：

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

<script>
  var geocoder;
  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);
    geocoder = new google.maps.Geocoder();
  }

  function geocodeAddress(address) {
    if (address != "None") {
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status === 'OK') {
          if (results[0].geometry.viewport) {
            map.fitBounds(results[0].geometry.viewport);
          } else {
            map.fitBounds(results[0].geometry.bounds);
          }
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    } else { // set back to initial zoom and center
      map.setOptions({
        center: new google.maps.LatLng(40.685646, -76.195499),
        zoom: 10
      });
    }
  }
</script>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
<div>
  <h2>Please Choose a City</h2>
</div>
<form>
  <fieldset>
    <label>
      Cities
    </label>
    <select id="myCity" name="myCity" onchange="geocodeAddress(this.value);">
      <option value="None">Select a City</option>
      <option value="Philadelphia, PA">Philadelphia, PA</option>
      <option value="New York, NY">New York, NY</option>
      <option value="Hartford, CT">Hartford, CT</option>
    </select>
  </fieldset>
</form>

【讨论】：

【解决方案3】：

检查这个例子。数据存储在selectdata 中，我通过change event 在select 上获取此数据并将setCenter 与新数据一起使用

var map;

function initialize() {
  
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.712784, lng: -74.005941},
    zoom: 8
  });

}

$("#dropdown").change(function() {
  var lat = $("#dropdown option:selected").data('lat');
  var lng = $("#dropdown option:selected").data('lng');
  changeLoc(lat, lng);
});

google.maps.event.addDomListener(window, "load", initialize);

function changeLoc(lat, lng) {
  map.setCenter(new google.maps.LatLng(lat,lng));
}

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" data-lat="40.712784" data-lng="-74.005941" selected>New York City</option>
  <option value="2"  data-lat="39.95228" data-lng="-75.16245" >Philadelphia</option>
</select>


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

【讨论】：