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

【问题标题】：Update google map from select dropdown menu从选择下拉菜单更新谷歌地图
【发布时间】：2011-03-30 09:20:58
【问题描述】：

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

使用选择下拉菜单，我需要能够使用变量更新地图，即从下拉菜单中选择 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>

编辑：

<!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>

【问题讨论】：

您的选择下拉菜单，有哪些选项？不同的位置/路径或不同的折线笔划？更新问题并为选择下拉菜单显示您的 HTML。
您要更新地图上的哪些信息？
我已经更新了选择。下拉列表将显示学校列表，当单击学校时..它将显示一条路线，即 route638..
那么，从代码来看，我想每个学校会有不同的折线（路线）？
是的，这是正确的，顺便说一句。

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

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

    <!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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

<select name="mapchange">
    <option onclick="updateMap">school 1</option>
    <option onclick="updateMap">school 2</option>
</select>

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

在 updateMap() 中添加 switch-case 逻辑：

switch(dropdownvalue)

{ 案例学校1： var polyline = 新的 google.maps.polyline .... 休息; 案例学校2： evar polyline = 新的 google.maps.polyline.... 休息; 默认：休息; }

之后，调用 initialize(polyline) 函数。在函数的最后，添加折线的行将是：

polyline.setMap(map);

希望这会有所帮助...

编辑：好的试试这个：

<select name="mapchange" onchange="updateMap(this.options[this.selectedIndex].value)>
<option value="school1">school 1</option>
<option value="school2">school 2</option>
</select>

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

      }

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

【讨论】：

你认为你可以将它拆分并显示代码吗？我正在努力让它工作！ :(
我已经在上面的原始问题中添加了我的完整代码，它更接近了一步，但它只显示一个空白的灰色画布，没有地图。不确定我是否正确输入了折线？我在 firebug 中收到错误“polyline is undefined [Break On This Error] polyline.setMap(map);”。
您是否包含了 google maps javascript 库？
我现在看到了您的编辑...当您调用 updateMap(mapchange) 方法时，您必须将选择控件作为参数传递
好的，我该怎么做？我承认在 JS 方面不是最好的。（非常感谢您对此提供的帮助！）