javascript 从选择下拉菜单更新谷歌地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5484419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update google map from select dropdown menu
提问by Mark
I need to be able to update a google map from a html select dropdown menu. Bit of a n00b so any info would be much appreciated. I have the following JS / Google map api v3 code to work with.
我需要能够从 html 选择下拉菜单更新谷歌地图。有点 n00b，所以任何信息都将不胜感激。我有以下 JS/Google map api v3 代码可以使用。
Using the select dropdown menu i will need to be able to update the map using the varibales, i.e select bromley_route638.setMap(map);from a dropdown menu. Thanks!
使用选择下拉菜单，我需要能够使用变量更新地图，即bromley_route638.setMap(map);从下拉菜单中选择。谢谢！
<script>
// Mapping variables
var global_strokeColor = "#FF0000";
var global_strokeOpacity = 1.0;
var global_strokeWeight = 2;
//BROMLEY BOROUGH
var bromley_centrepoint = new google.maps.LatLng(51.408664,0.114405);
var school_bromley_beaverwood = new google.maps.LatLng(51.41859298,0.089179345);
var school_bromley_bishpjustus = new google.maps.LatLng(51.382522,0.045018);
// Route 638
var bromley_route638 = new google.maps.Polyline({
path: [new google.maps.LatLng(51.408664,0.114405),new google.maps.LatLng(51.412973,0.114973),new google.maps.LatLng(51.417979,0.097195),new google.maps.LatLng(51.421214,0.023720)],
strokeColor: global_strokeColor,
strokeOpacity: global_strokeOpacity,
strokeWeight: global_strokeWeight
});
function initialize() {
var myLatLng = bromley_centrepoint;
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
bromley_route638.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="asd">
<form style="float:left; ">
<select name="mapchange">
<option onclick="">school 1</option>
<option onclick="">school 2</option>
</select>
</form>
</div>
</body>
</html>
EDIT:
编辑：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Bus Routes</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function updateMap(selectControl) {
switch(selectControl.value)
{
case school1:
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(51.408664,0.114405),
new google.maps.LatLng(51.412973,0.114973),
new google.maps.LatLng(51.417979,0.097195),
new google.maps.LatLng(51.421214,0.023720)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var latLng = new google.maps.LatLng(51.41859298,0.089179345)
break;
case school2:
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(51.408664,0.114405),
new google.maps.LatLng(51.412973,0.114973),
new google.maps.LatLng(51.417979,0.097195),
new google.maps.LatLng(51.421214,0.023720)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var latLng = new google.maps.LatLng(51.382522,0.045018)
break;
default:
break;
}
initialize(polyline, latLng);
}
function initialize(polyline, schoolLatLng) {
var myLatLng = schoolLatLng;
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline.setMap(map);
}
//end
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:600px; height:600px; display:block;">
<div id="map_canvas" style="width:600px; height:600px;"></div>
</div>
<form style="float:left; ">
<select name="mapchange">
<option onchange="updateMap" value="school1">school 1</option>
<option onchange="updateMap" value="school2">school 2</option>
</select>
</form>
</body>
</
html>
回答by GoG
ok. here is the entire code and it is working: try changing items in the drop dow list and the map will update .... ONLY ADD INITIAL VALUES for the case:
行。这是完整的代码并且它正在工作：尝试更改下拉列表中的项目，地图将更新......只为这种情况添加初始值：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Bus Routes</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function updateMap(selectControl) {
alert(selectControl);
switch(selectControl)
{
case 'school1':
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(51.408664,0.114405),
new google.maps.LatLng(51.412973,0.114973),
new google.maps.LatLng(51.417979,0.097195),
new google.maps.LatLng(51.421214,0.023720)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var latLng = new google.maps.LatLng(51.41859298,0.089179345)
break;
case 'school2':
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(51.408664,0.114405),
new google.maps.LatLng(51.412973,0.114973),
new google.maps.LatLng(51.417979,0.097195),
new google.maps.LatLng(51.421214,0.023720)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var latLng = new google.maps.LatLng(51.382522,0.045018)
break;
default:
break;
}
initialize(polyline, latLng);
}
function initialize(polyline, schoolLatLng) {
var myLatLng = schoolLatLng;
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline.setMap(map);
}
//end
</script>
</head>
<body onload="initialize()">
<div id="map" style="width:600px; height:600px; display:block;">
<div id="map_canvas" style="width:600px; height:600px;"></div>
</div>
<form style="float:left; ">
<select name="mapchange" onchange="updateMap(this.options[this.selectedIndex].value)">
<option value="school1">school 1</option>
<option value="school2">school 2</option>
</select>
</form>
</body>
</html>
回答by Marc Uberstein
I guess you want to reset the LatLng to a new value. What you can do is to set the LatLng values in your drop down in the value attribute. Set a event, onchange, on your select box to a javascript function.
我猜您想将 LatLng 重置为新值。您可以做的是在 value 属性的下拉列表中设置 LatLng 值。将选择框上的事件 onchange 设置为 javascript 函数。
In the function check the selected option and get the new selected LatLng. and then redirect (or ajax call) to same page with url variables or hidden input fields to set new LatLng in the GoogleMap code.
在函数中检查选定的选项并获取新选定的 LatLng。然后使用 url 变量或隐藏输入字段重定向（或 ajax 调用）到同一页面以在 GoogleMap 代码中设置新的 LatLng。
回答by GoG
So, based on yours description, what you can do is simply to add function with switch-case statement which will check for the name of the selected school. For each case, your polygon variable will get different value, and that value will be shown on the map. What am I saying is something like:
因此，根据您的描述，您可以做的只是添加带有 switch-case 语句的函数，该函数将检查所选学校的名称。对于每种情况，您的多边形变量将获得不同的值，并且该值将显示在地图上。我在说什么是这样的：
<select name="mapchange">
<option onclick="updateMap">school 1</option>
<option onclick="updateMap">school 2</option>
</select>
Modify the initialize function to receive input argument: initialize(var polyline)
修改初始化函数以接收输入参数： initialize(var polyline)
In the updateMap() add the switch-case logic :
在 updateMap() 中添加 switch-case 逻辑：
switch(dropdownvalue)
{ case school1: var polyline = new google.maps.polyline.... break; case school2: evar polyline = new google.maps.polyline.... break; default: break; }
{ case school1: var polyline = new google.maps.polyline .... break; 案例学校2：evar polyline = new google.maps.polyline .... break; 默认值：中断；}
After that, call the initialize(polyline) function . And at the very end of the function the line for adding the polyline will be:
之后，调用 initialize(polyline) 函数。在函数的最后，添加折线的行将是：
polyline.setMap(map);
hope this helps...
希望这可以帮助...
Edit: OK Try this:
编辑：好的试试这个：
<select name="mapchange" onchange="updateMap(this.options[this.selectedIndex].value)>
<option value="school1">school 1</option>
<option value="school2">school 2</option>
</select>
The updateMap method:
updateMap 方法：
function updateMap(selectControl)
{
switch(selectControlValue)
{
case 'school1':
var polyline = new google.maps.polyline....
var latLng = new google.maps.LatLng(the coordinates of the school)
break;
case 'school2':
var polyline = new google.maps.polyline....
var latLng = new google.maps.LatLng(the coordinates of the school)
break;
default:
break;
}
initialize(polyline, latLng);
}
And, the initialize function will be:
并且，初始化函数将是：
function initialize(polyline, schoolLatLng) {
var myLatLng = schoolLatLng;
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline.setMap(map);
}
This is the entire solution, you just need to update the data for the polylines of the routes to the schools, and tha coordinates of the schools.
这是整个解决方案，您只需要更新通往学校的路线折线的数据，以及学校的坐标。
