Отображение различных маркеров карты и полилинии в зависимости от выбора раскрывающегося списка

Я работаю над проектом, который использует API Карт Google. Я хотел бы создать страницу, которая по умолчанию отображает встроенную карту с центром в Сан-Франциско, но добавляет определенные маркеры и полилинии в зависимости от того, какой из пунктов раскрывающегося меню был выбран. Я не уверен, как настроить этот список, чтобы изменить отображение карты и маркера в зависимости от выбора пользователя.

Что, я думаю, мне нужно сделать, так это настроить функцию переключения с JavaScript для выполнения на разных фрагментах кода в зависимости от пользовательского ввода. Однако я совсем новичок в 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>

javascript google-maps-api-3 google-maps-markers
person user811491    schedule 06.08.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать addDomListener() для прослушивания соответствующего события DOM (вероятно, onChange) элемента управления <select>. Внутри обработчика этого события вам нужно будет установить существующую карту маркера на null и установить карту маркера, который вы хотите показать, на map. Если у вас есть достаточное количество маркеров, вы можете создать их все заранее. Если вы имеете дело с тысячами маркеров, это совсем другая история. Если вам необходимо создавать маркеры по мере необходимости, убедитесь, что вы понимаете, как область действия работает в обработчике.

Я не работал с полилиниями, но процесс, вероятно, похож, возможно, даже идентичен.

Я действительно не думаю, что оператор switch - это то, что вы хотите использовать в этом случае, но, поскольку вы спрашиваете, вы можете просто использовать Google оператор переключения javascript и найти подходящие объяснения. Даже у широко оклеветанной 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
}
person Trott    schedule 07.08.2011