如何根據從下拉菜單中選擇的城市顯示Google地圖

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

讓我知道如果有什麼不清楚。

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

Answer 2

檢查這個例子。數據是儲存在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>

Answer 3

一種選擇是使用地理編碼器來放大地圖至合適範圍爲城市：

<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

代碼片段：

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>