根據下拉列表選擇顯示不同的地圖標記和折線

Question

我正在研究一個利用Google Maps API的項目。 我想創建一個頁面，該頁面默認顯示一個以舊金山為中心的嵌入式地圖，但是會根據選擇了哪個下拉菜單項添加特定的標記和折線。 我不確定如何配置此列表以根據用戶選擇更改地圖和標記顯示。

我想我需要做的是使用JavaScript設置一個switch函數，以根據用戶輸入在不同的代碼塊上執行。 不過，我是JavaScript的初學者，所以我不確定該怎么做。

現在，我只設置了下拉列表和默認的地圖顯示。 任何建議將不勝感激。

<!DOCTYPE html>
<!-- The majority of this embedding code was borrowed from code.google.com/apis/maps/documentation/javascript/examples/map-simple.html -->
<html>
<head>
<meta name="viewport" content="width=page-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Project 2: BART Route Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

function initialize() {
    var myLatlng = new google.maps.LatLng(37.786453,-122.416649);
    var myOptions = {
      zoom: 12,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        title:"San Francisco"
    });  
    }
</script>

</head>
<body onload="initialize()">
<h1> BART Route Map </h1>
<h2> Select a route: </h2>
<form id="routeselector">
    <select name="mapchange">
    <option value="DALY-DUBL">Daly City - Dublin/Pleasanton</option>
    <option value="DALY-FRMT">Daly City - Fremont</option>
    <option value="DUBL-DALY">Dublin/Pleasanton - Daly City</option>
    <option value="FRMT-DALY">Fremont - Daly City</option>
    <option value="FRMT-RICH">Fremont - Richmond</option>
    <option value="MLBR-RICH">Millbrae/Daly City - Richmond</option>
    <option value="SFIA-PITT">Millbrae/SFIA - Pittsburg/Bay Point</option>
    <option value="PITT-SFIA">Pittsburg/Bay Point - SFIA/Millbrae</option>
    <option value="RICH-FRMT">Richmond - Fremont</option>
    <option value="RICH-MLBR">Richmond - Daly City/Millbrae</option>
    </select>
</form>

<div id="map_canvas" style="height=100%; width=100%">
</div><!-- map_canvas -->

</body>

</html>

Answer 1

您可以使用addDomListener()來監聽<select>控件的addDomListener() DOM事件（可能是onChange ）。 在該事件的處理程序中，您需要將現有標記的地圖設置為null ，並將要顯示的標記的地圖設置為map 。 如果標記數量合理，則可以提前創建所有標記。 如果您要處理成千上萬個標記，那就另當別論了。 如果必須根據需要創建標記，請確保您了解作用域在處理程序中的工作方式。

我沒有使用折線，但是過程可能相似，甚至可能相同。

在這種情況下，我真的不認為您想使用switch語句，但是由於您提出了要求，因此您可以只使用Google javascript switch語句並找到不錯的解釋。 即使是備受打擊的w3schools也有可以接受的快速介紹（盡管它缺少細節）。 這是他們顯示語法的方式：

switch(n)
{
case 1:
  execute code block 1
  break;
case 2:
  execute code block 2
  break;
default:
  code to be executed if n is different from case 1 and 2
}

根據下拉列表選擇顯示不同的地圖標記和折線

問題描述

1 個解決方案

解決方案1
0 2011-08-07 13:42:42

根據下拉列表選擇顯示不同的地圖標記和折線

問題描述

1 個解決方案

解決方案1 0 2011-08-07 13:42:42

解決方案1
0 2011-08-07 13:42:42