Question

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

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

如果不清楚，请告诉我。

＆＃13;

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

＆＃13;

#map {
  height: 200px;
}

＆＃13;

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

＆＃13;

http://output.jsbin.com/suhiveb

Answer 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

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

检查此示例。数据存储在select data中，我在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>

如何根据从下拉菜单中选择的城市显示Google地图

3 个答案: