закрыть конкретное информационное окно / Скрыть полилинию Google maps api v3 - PullRequest
Новая
       12

закрыть конкретное информационное окно / Скрыть полилинию Google maps api v3

1 голос
/ 31 марта 2011

Мне нужно иметь возможность показать скрыть отдельную ломаную и связанную с ней информациюWindow + Marker.

Вот мой код, на данный момент функция clearOverlays () скрывает все маркеры, мне нужно иметь возможность скрыть определенный маркер, используя функции hideRoutePath () в ссылках внизу. Любая помощь, оцениваемая по этому вопросу как у меня кончились идеи .. спасибо! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<title>test</title> 

<script type='text/javascript'> 

var map = null;
var markersArray = [];

//default load position
function initialize() {
    var latlng = new google.maps.LatLng(51.41859298,0.089179345);

    var settings = {
        zoom: 11,
        center: latlng,
        mapTypeControl: true,
        scaleControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT},
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        backgroundColor: 'white'
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), settings);

}
// End initialize function

function clearOverlays() {

  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);

    }
  }
}


// Mapping variables
var global_strokeColor = "#ED00FF";
var global_strokeOpacity = 0.7;
var global_strokeWeight = 6;

//Route 1
function showRoutePath_1() {

    position = new google.maps.LatLng(51.41859298,0.089179345);
    var infowindow = new google.maps.InfoWindow({content: "Beaverwood School"});
    var marker = new google.maps.Marker({position: position,map: map});

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

    markersArray.push(marker);

    //open infowWindow with marker
    infowindow.open(map, marker);
    //setTimeout(function () { infowindow.close(); }, 5000);

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

    bromley_route638.setMap(map);

}
// End Route 1

//Route 2
function showRoutePath_2() {

    position = new google.maps.LatLng(51.382522,0.045018);

    var infowindow = new google.maps.InfoWindow({content: "Bishops Justus School"});
    var marker = new google.maps.Marker({position: position,map: map});

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

    markersArray.push(marker);

    //open infowWindow with marker
    infowindow.open(map, marker);
    //setTimeout(function () { infowindow.close(); }, 5000);

    bromley_route638Run2 = new google.maps.Polyline({
      path: [
      new google.maps.LatLng(51.369530,0.002027),
      new google.maps.LatLng(51.375388,0.010733),
      new google.maps.LatLng(51.377991,0.009467),
      new google.maps.LatLng(51.401988,0.017248)],
      strokeColor: global_strokeColor,
      strokeOpacity: global_strokeOpacity,
      strokeWeight: global_strokeWeight
    });

    bromley_route638Run2.setMap(map);

}
//End Route 2


//Hide Routes
function hideRoutePath(number) {
    if(number == 1) {
    clearOverlays();
    bromley_route638.setMap(null);
    }
    else if(number == 2) {
    clearOverlays();
    bromley_route638Run2.setMap(null);}
}

</script> 

</head> 

<body onload='initialize()'> 

    <div id="map_canvas"></div>

    <a class="exp" id="myMenu1">View schools in Hackney</a>

    <div class="expandable_box" id="myDiv1">
        <p>Select a school to view its bus route and location.</p>
        <a href="#" onClick="showRoutePath_1();"> Beaverwood School +</a> / <a href="#" onClick="hideRoutePath(1);">-</a><br/>
        <a href="#" onClick="showRoutePath_2();"> Bishop Justus School +</a> / <a href="#" onClick="hideRoutePath(2);">-</a>
    </div>

</body> 
</html>

Ответы [ 2 ]

0 голосов
/ 02 апреля 2011

Вот полное Демонстрация JSFiddle:

Вот один из способов сделать это, но код можно оптимизировать. Сначала я добавил две новые функции removeMarker и checkMarker. removeMarker, удаляет маркер с карты, а также из массива, чтобы у вас не было задерживающихся маркеров в одном и том же месте более одного раза. checkMarker, проверяет, есть ли маркер уже на карте и в глобальном массиве markersArray. Возвращает true, если еще возвращает false. Мы используем checkMarker, чтобы убедиться, что мы не создаем несколько экземпляров маркера на одном и том же конце. в вашем случае это маркерный маршрут 1 и маркерный маршрут 2. 

//remove specific marker from map
function removeMarker(myMark) {
    if (markersArray) {
        for (var i in markersArray) {
            if (myMark == markersArray[i]['number']) {
                console.log(markersArray[i]['number']);
                markersArray[i].setMap(null);
                markersArray.splice(i,1); //removes marker from array
                break;
            }
        }
    }
}

//check if marker already exist on map
function checkMarker(number){
    if(markersArray){
        for(var i in markersArray){
            if(markersArray[i]['number'] == number)
                return true;
        }
    } else 
        return false;
}

Затем я добавляю средство проверки маркеров, используя checkMarker, чтобы убедиться, что мы не создаем двойной маркер с его ассоциированным маршрутом, а также я дал вашему создателю уникальный «числовой» идентификатор. 1 - маркер1, а 2 - маркер2. Эти два мода должны быть в функциях showRoutePath_1 и showRoutePath_2: 

//check if marker1 already on map if true do nothing
if(checkMarker(1))  //check if marker already in global marker array/map if marker 2 replace 1 with 2
    return;
position = new google.maps.LatLng(51.41859298, 0.089179345);
var infowindow = new google.maps.InfoWindow({
    content: "Beaverwood School"
});
var marker = new google.maps.Marker({
    position: position,
    map: map
});
marker['number'] = 1; //Here is the unique identifier we assign.  if marker 2 replace 1 with 2

И последнее, но не менее важное: я изменяю ваш hideRoutePath, добавляя идентификатор параметра «число», и использую функцию removeMarker, чтобы скрыть / удалить связанный путь и маркер: 

function hideRoutePath(number) {
    if (number == 1) {
        //clearOverlays();
        bromley_route638.setMap(null);
    }
    else if (number == 2) {
        //clearOverlays();
        bromley_route638Run2.setMap(null);
    }
    removeMarker(number);
}
0 голосов
/ 02 апреля 2011

похоже, вам просто нужно объявить ваши маршруты в качестве глобальных переменных. добавьте следующее в начало вашего скрипта 

var bromley_route638, bromley_route638Run2;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...