2012-03-07 14 views
19

Witaj, to może być naprawdę głupie pytanie, ale próbuję sprawić, by znaczniki zniknęły po kliknięciu na . Znacznik jest umieszczony poprawnie na mapie, ale kiedy go klikam, nie robi nic. Zastanawiałem się, dlaczego nie działa. Dziękuję Ci!Jak ukryć znaczniki Google Api Marker za pomocą jQuery

<script type="text/javascript" src="jQuery.js"></script> 
    <script type="text/javascript"> 

    $(document).ready(function(){ 
     var myOptions = { 
     center: new google.maps.LatLng(40.1, -88.2), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var myLatlng = new google.maps.LatLng(40.1, -88.2); 
     var temp_marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title:"Hello World!" 
     }); 

     console.log($(temp_marker)); 
     console.log(temp_marker); 

     //temp_marker.click(function(){$(this).hide();}); 

     $(temp_marker).click(function(){console.log("click is working"); $(this).hide();}); 
      }); 
    </script> 
</head> 
<body> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 

Odpowiedz

50

temp_marker jest obiektem JavaScript, a nie elementu DOM. Aby dołączyć słuchacza do znacznika (API zajmie specyfikę których DOM elementem dołączyć do iw jaki sposób), należy użyć systemu zdarzeń własne Google Maps API Like:

google.maps.event.addListener(marker, 'click', function() { 
    marker.setVisible(false); // maps API hide call 
    }); 

Ich dokumentacja: Google Maps Javascript API v3 - Events

+0

Czy to oznacza, że ​​nie mogę zastosować jQuery w większości obiektów w Mapach Google? – wayfare

+2

@wayfare the Maps API umieszcza warstwę abstrakcji pomiędzy tworzonymi przez nią elementami DOM dla znaczników i implementatora. Mogą istnieć wskazówki dotyczące bezpośredniego dostępu do elementów DOM, ale nie ma obsługiwanych ścieżek. Każda próba manipulowania elementami bezpośrednio ulegnie zniszczeniu, gdy tylko Mapy Google dokonają wewnętrznej zmiany; może również nie działać w różnych przeglądarkach. –

+0

Po dodaniu opcji zoptymalizowanej: false w deklaracji znacznika można uzyskać do niej dostęp za pomocą jQuery, ale interfejs API resetuje całą konfigurację do domyślnych podczas przesuwania mapy, powiększania lub pomniejszania, z tego powodu najlepszym sposobem jest używać setVisible, ponieważ zachowa tę konfigurację. – Corner

1

to obiekt mapy google, a nie element DOM. Jquery działa na elementach DOM.

0

nie jestem pewien, że można po prostu ukryć znacznik, ale odpowiedni hak do zdarzenia click byłoby zrobić coś takiego, gdy zadeklarujesz

google.maps.event.addListener(marker, 'click', function() { 
    // do your hide here 
}); 

Być może trzeba będzie usunąć znacznik z mapy zamiast "ukrywać" ją.

Na co próbujesz ukryć znaczniki? Czy musisz mieć możliwość ponownego wprowadzenia znacznika? Jak planujesz to osiągnąć?

3

Ben dostarczył ci połowę odpowiedzi. Po wykryciu zdarzenia kliknięcia znacznika musisz "ukryć" lub usunąć znacznik z mapy. Standardowym sposobem na to zrobić z Google Maps jest, aby to zrobić:

this.setMap(null); 

Można wtedy zobaczyć mapę być ponownie stosując setMap przypisać mapy obiektu zamiast null.

3

Rozszerzając notatek Bena, powinno to iść w którym zadeklarowały swój znacznik - na przykład:

var beachMarker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: image 
}); 
google.maps.event.addListener(beachMarker, 'click', function() { 
    beachMarker.setVisible(false); // maps API hide call 
}); 
} 

Zajęło mi wieki, próbując zrozumieć to. Ogromny kredyt dla Bena! Dzięki!

Powiązane problemy