从选择下拉菜单更新谷歌地图 [英] Update google map from select dropdown menu
本文介绍了从选择下拉菜单更新谷歌地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要能够从html选择下拉菜单更新Google地图。 n00b的位，所以任何信息将不胜感激。我有以下的JS / Google map api v3代码。
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.
使用选择下拉菜单，我需要能够使用varibales更新地图，即从下拉菜单中选择 bromley_route638.setMap（map）; 。谢谢！
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!
<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>
编辑：
<!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>
推荐答案
好的。这里是整个代码，它是工作：尝试更改下拉列表中的项目和地图将更新....只为该案例添加初始值：
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>
这篇关于从选择下拉菜单更新谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
