Question

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

switch(dropdownvalue)

{ 案例学校1： var polyline = new google.maps.polyline .... 打破; 案例学校2： evar polyline = new google.maps.polyline .... 打破; 默认：打破; }

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

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

      }

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

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

3 个答案: