2017-03-29 27 views
0

我想,當用戶點擊一個標記,打開並關閉所有以前打開的標記。我試圖用這個代碼沒有運氣,任何想法如何做到這一點?關閉打開的infowindows - 谷歌地圖api

更新,我使用的是完整的腳本,並基於答案可能的解決方案:

(function($) { 

    /* 
    * new_map 
    * 
    * This function will render a Google Map onto the selected jQuery element 
    * 
    * @type function 
    * @date 8/11/2013 
    * @since 4.3.0 
    * 
    * @param $el (jQuery element) 
    * @return n/a 
    */ 

    function new_map($el) { 

     // var 
     var $markers = $el.find('.marker'); 


     // vars 
     var args = { 
     scrollwheel: false, 
     zoom : 5, 
     center : new google.maps.LatLng(0, 0), 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
     }; 


     // create map   
     var map = new google.maps.Map($el[0], args); 


     // add a markers reference 
     map.markers = []; 


     // add markers 
     $markers.each(function(){ 

      add_marker($(this), map); 

     }); 


     // center map 
     center_map(map); 


     // return 
     return map; 

    } 

    /* 
    * add_marker 
    * 
    * This function will add a marker to the selected Google Map 
    * 
    * @type function 
    * @date 8/11/2013 
    * @since 4.3.0 
    * 
    * @param $marker (jQuery element) 
    * @param map (Google Map object) 
    * @return n/a 
    */ 

    function add_marker($marker, map) { 

     // var 
     var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 

     // create marker 
     var marker = new google.maps.Marker({ 
     position : latlng, 
     map  : map, 
     icon: '<?php echo get_template_directory_uri(); ?>/assets/img/google-map-marker.png', 
     }); 

     // add to array 
     map.markers.push(marker); 

     if($marker.html()){ 
     var infoWindows = []; 
     // show info window when marker is clicked 
     google.maps.event.addListener(marker, 'click', function() { 

      // Need to clear up old info windows before adding new ones 
      for (var i = 0; i < infoWindows.length; i++) { 
      infoWindows[i].setMap(null); 
      } 

     // create info window 
      var infoWindow = new google.maps.InfoWindow({ 
      content : $marker.html() 
      }); 

      infoWindow.open(map, marker); 
      infoWindows.push(infoWindow); 
     }); 
     } 

    } 


    /* 
    * center_map 
    * 
    * This function will center the map, showing all markers attached to this map 
    * 
    * @type function 
    * @date 8/11/2013 
    * @since 4.3.0 
    * 
    * @param map (Google Map object) 
    * @return n/a 
    */ 

    function center_map(map) { 

     // vars 
     var bounds = new google.maps.LatLngBounds(); 

     // loop through all markers and create bounds 
     $.each(map.markers, function(i, marker){ 

     var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 

     bounds.extend(latlng); 

     }); 

     // only 1 marker? 
     if(map.markers.length == 1) 
     { 
     // set center of map 
      map.setCenter(bounds.getCenter()); 
      map.setZoom(16); 
     } 
     else 
     { 
     // fit to bounds 
     map.fitBounds(bounds); 
     } 

    } 

    /* 
    * document ready 
    * 
    * This function will render each map when the document is ready (page has loaded) 
    * 
    * @type function 
    * @date 8/11/2013 
    * @since 5.0.0 
    * 
    * @param n/a 
    * @return n/a 
    */ 
    // global var 
    var map = null; 

    $(document).ready(function(){ 

     $('.acf-map').each(function(){ 

     // create map 
     map = new_map($(this)); 

     }); 

    }); 

    })(jQuery); 
+0

[Google Maps API - 一次只能打開一個infowindow]的可能重複(http://stackoverflow.com/questions/33713676/google-maps-api-only-one-infowindow-open-at-once ) – geocodezip

+0

[自動關閉InfoWindow在googlemap中]的可能重複(http://stackoverflow.com/questions/28138468/auto-close-infowindow-in-googlemap) – geocodezip

+0

[關閉InfoWindow之前打開另一個]的可能重複(http:/ /stackoverflow.com/questions/14321808/close-infowindow-before-open-another) – geocodezip

回答

0

我在你的代碼變化不大。

var infoWindows = []; 
if($marker.html()){ 

    // Need to clear up old info windows before adding new ones 
    for (var i = 0; i < infoWindows.length; i++) { 
     infoWindows[i].setMap(null); 
    } 
    // show info window when marker is clicked 
    google.maps.event.addListener(marker, 'click', function() { 

    // create info window 
    var infoWindow = new google.maps.InfoWindow({ 
     content : $marker.html() 
    }); 

    infoWindow.open(map, marker); 
    infoWindows.push(infoWindow); 
    }); 
} 

我希望它能起作用。如果沒有,讓我知道更多關於你的代碼的細節。 謝謝

+0

我使用你的代碼,但當我點擊一個標記,我得到以下錯誤:'infoWindows未定義' – codek

+0

我編輯我的回答。添加var infoWindows = [];在您的代碼頂部。 你需要在向其中推入對象之前聲明數組變量(在你的情況下,「infoWindows」)。 – taymyinl

+0

謝謝。它已修復它,我沒有得到任何錯誤,仍然沒有解決問題,當我點擊另一個標記,它保持所有'infowindows'打開 – codek

相關問題