Update google-Karte aus wählen Sie im dropdown-Menü
Ich muss in der Lage sein, ein update der google-map aus einem html-select-dropdown-Menü. Bisschen n00b so dass jede info würde sehr geschätzt. Ich habe Folgendes JS /Google map api v3 code, mit zu arbeiten.
Mithilfe der select-dropdown-Menü, ich muss in der Lage sein, um die Karte zu aktualisieren mit dem varibales, ich.e wählen Sie bromley_route638.setMap(map); aus einem dropdown-Menü. Danke!
<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>- Die select-dropdown-Menü, was sind die Optionen? Verschiedene Orte/Pfade oder andere Polylinie Konturen? Aktualisieren Sie die Frage und zeigen Sie Ihren HTML-Code für die select-dropdown-Menü.
- Welche Infos auf der Karte tun, die Sie aktualisieren möchten?
- Ich habe aktualisiert mit den wählen Sie. Der dropdown zeigt eine Liste der Schulen, wenn eine Schule geklickt wird.. es zeigt eine Strecke, die ich.e route638..
- Also, aus dem code, ich vermute, Sie haben verschiedene Polylinie(route) für jede Schule?
- Ja das ist richtig, danke btw.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
ok. hier ist der gesamte code und es funktioniert: ändern Sie die Elemente in der drop-dow-Liste und die Karte aktualisieren .... FÜGEN Sie NUR die Startwerte für den Fall:
Ich denke, Sie zurücksetzen möchten die LatLng auf einen neuen Wert. Was Sie tun können, ist, um die LatLng-Werte in Ihrer Dropdown in das value-Attribut. Legen Sie ein event, onchange auf select-Feld, um eine javascript-Funktion.
In der Funktion prüfen Sie die ausgewählte option und erhalten die neu gewählten LatLng. und dann umleiten (oder ajax-call) auf derselben Seite mit url-Variablen oder versteckte input-Felder, um neue LatLng in der GoogleMap code.
So, basierend auf Ihre Beschreibung, was Sie tun können, ist einfach zu add-Funktion mit switch-case-Anweisung, die prüft, ob der name der ausgewählten Schule.
Für jeden Fall das polygon-variable bekommt anderen Wert, und dieser Wert wird auf der Karte angezeigt werden.
Was sage ich etwas wie:
Ändern Sie die initialize-Funktion zum empfangen von Eingabe-argument:
initialize(var polyline)In der updateMap() fügen Sie die switch-case-Logik :
{
Fall school1:
var polyline = new google.maps.Polylinie....
break;
Fall school2:
evar polyline = new google.maps.Polylinie....
break;
Standard:
break;
}
Danach rufen Sie die initialize(polyline) - Funktion . Und ganz am Ende der Funktion die Zeile für das hinzufügen der Polylinie werden:
hoffe, das hilft...
Edit: OK, Versuchen Sie diese:
Den updateMap Methode:
Und die initialize-Funktion:
Dies ist die gesamte Lösung, Sie müssen nur die Daten aktualisieren, die für die Polylinien der Wege zu den Schulen und tha Koordinaten der Schulen.