从选择下拉菜单更新谷歌地图

我需要能够从html选择下拉菜单更新谷歌地图。 n00b的位，所以任何信息都将非常感激。 我有以下JS / Google map api v3代码可以使用。

使用选择下拉菜单，我需要能够使用bromley_route638.setMap(map);更新地图，即选择bromley_route638.setMap(map); 从下拉菜单中。 谢谢！

   // 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); }    
 
 
  school 1 school 2  
 
   

编辑：

         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    
 
 
 
  school 1 school 2  
   

Answer 1

好。 这是整个代码，它正在工作：尝试更改下拉列表中的项目，地图将更新….仅为案例添加初始值：

            
 
 
 
  school 1 school 2  
   

Answer 2

我想你想把LatLng重置为一个新值。 您可以做的是在value属性的下拉列表中设置LatLng值。 在选择框上将事件onchange设置为javascript函数。

在该function中，选中所选选项并获取新选择的LatLng。 然后使用url变量或隐藏的输入字段将（或ajax调用）重定向到同一页面，以在GoogleMap代码中设置新的LatLng。

Answer 3

因此，根据您的描述，您可以做的只是添加具有switch-case语句的函数，该语句将检查所选学校的名称。 对于每种情况，您的多边形变量将获得不同的值，该值将显示在地图上。 我的意思是：

  school 1 school 2  

修改initialize函数以接收输入参数： initialize(var polyline)

在updateMap（）中添加switch-case逻辑：

 switch(dropdownvalue) 

{case school1：va​​r polyline = new google.maps.polyline …. break; case school2：evar polyline = new google.maps.polyline …. break; 默认值：break; }

之后，调用initialize（折线）函数。 在函数的最后，添加折线的线将是：

 polyline.setMap(map); 

希望这可以帮助…

编辑：确定试试这个 ：

 school 1 school 2  

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

并且，初始化函数将是：

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

这是整个解决方案，您只需要更新学校路线折线的数据，以及学校的坐标。