更新/重新加載標記而不重新加載谷歌地圖

Question

我正在使用以下代碼來生成標記引腳。它完美加載，但在這張地圖的左側有過濾器。如何在不重新加載地圖的情況下重新加載標記？這一直造成一些挫折，所以任何幫助將不勝感激。

非常感謝，

//Google map results 
     var contentStrings = []; 
     var infowindow = new google.maps.InfoWindow(); 
     var mapinited = false; 
     var map; 
     var myOptions = { 
      zoom: 11, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var currentinfobox; 
     var myLatlng; 
     var markersArray=[]; 
     var LatLngList = []; 

$().ready(function() { 

    //reinit search 
    if (window.location.hash) { 
     submitForm(window.location.hash.replace('#','')); 
    } 
    else if (readCookie('sf')) { 
      //submitForm(readCookie('sf')); 
    } 

    //init map 
    $('#map_view').click(function() { 
     if (mapinited) { 
      return; 
     } else { 
      mapinited = true; 
      initMap(); 
     } 



    function initMap() { 
      locate(["Ireland"],function(result) { 
     map = new google.maps.Map(document.getElementById("search_map"), myOptions); 
     myLatlng = new google.maps.LatLng(result.lat(),result.lng()); 

       var key =0; 

       $.each(map_results, function(key, value){ 
     LatLngList[key] = new google.maps.LatLng(value.lat,value.long) 
     contentStrings[key] = 
       '<div id="ginfo_content" class="map-pop-up">'+ 
        '<span class="content-top">&nbsp;</span>'+ 
        '<div class="content-middle">'+ 
        '<div class="map-filler">'+ 
         '<a class="map-close" href="javascript:;" onclick="infowindow.close();" title="Close">x</a>'+ 
         '<br class="clearfix">'+ 
         '<div class="map-pop-up-left">'+ 
         '<a href="profile.php?id='+ value.user_id +'"><div class="thumbnail"><img src="'+ value.image +'" width="64" height="64"></div></a>'+ 

         '<a href="javascript:;" class="user-contact" onClick="to='+ value.user_id +';contact_showCaptcha();pop_up(\'pop-up-contact\');">Contact</a>'+ 

         '</div>'+ 
         '<div class="map-pop-up-right">'+ 
         '<h2><a href="profile.php?id='+ value.user_id +'">'+ value.firstname +' '+value.lastname+',</a> '+ value.address +'</h2>'+ 
         '<p>'+ stripslashes(value.about) +'</p>'+ 
         '</div>'+ 
         '<br class="clearfix">'+ 
         '<div class="map-pop-up-footer"><a href="profile.php?id='+ value.user_id +'" class="view-profile">View Profile</a><span class="telephone">Telephone: '+ value.phone +'</span></div>'+ 
        '</div>'+ 
        '</div>'+ 
        '<span class="content-bottom">&nbsp;</span>'+ 
       '</div>'; 
       key++; 
       });//end each 

       map_results=""; 

     google.maps.event.addListener(infowindow, 'domready', function() { 
      var infocontent = $('#ginfo_content').clone(); 
      var l = $('#ginfo_content').parent().parent().parent().addClass('original_popup').html(''); 
      $('.original_popup').append(infocontent).show(); 
      $('.original_popup').css('width','360px').css('height','230px').css('left','+=27px').css('top','+=65px'); 
     }); 

     var zoomChangeBoundsListener = google.maps.event.addListener(map, 'zoom_changed', function() { 
      if (this.getZoom() > 14) // Change max/min zoom here 
       this.setZoom(14);   
      google.maps.event.removeListener(zoomChangeBoundsListener); 
     }); 
     var infoboxlistener = google.maps.event.addListener(map, 'zoom_changed', `enter code here`function() { 
      infowindow.close(); 
     }); 
     loadMapInit(LatLngList,contentStrings); 

    }); 
    } 

    }); 

    }); 

Answer 1

希望這是回答你問：

當你創建一個標記，您可以使用「地圖」參數來設置它的地圖，並把它展示向上。或者，如果您想將其綁定到過濾器，則可以忽略地圖參數並稍後使用marker.setMap（地圖）。

// To add the marker to the map, use the 'map' property 
var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title:"Hello World!" 
}); 

如果你想「刪除」，並與事件「添加」標誌，就可以使用marker.setMap（空）除去標記和marker.setMap（圖）重新添加它。

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    title:"Hello World!" 
}); 

// To add the marker to the map, call setMap(); 
marker.setMap(map); 

// To remove the marker from the map 
marker.setMap(null); 

https://developers.google.com/maps/documentation/javascript/markers

更新： 所以，如果你想「刷新」的標記，你可以遍歷和當前活動的標記陣列，設置其映射到null，然後重置它們在地圖上。

Answer 2

我的頁面在兩種情況下加載地圖1）第一次加載2）通過ajax調用持續刷新谷歌地圖。

下我的情況爲我工作

<input type="hidden" id="lonDeg"><!--route lat to here via ajax call--> 
<input type="hidden" id="latDeg"><!--route lon to here via ajax call--> 

<script> 
    var map; 
    function initMap() { 
    // these two lines are the only variation from the native google 
    // API code. They allow for dynamic updates of the lon/lat (below) 
    var lonDeg = parseFloat($("#lonDeg").val()); 
    var latDeg = parseFloat($("#latDeg").val()); 

    var midp = {lat:latDeg, lng:lonDeg }; 

    map = new google.maps.Map(document.getElementById('map'), { 
     scaleControl: true, 
     center: midp, 
     zoom: 10 

    }); 
    var marker = new google.maps.Marker({map: map, position: midp}); 
     marker.addListener('click', function() { 
     infowindow.open(map, marker); 
    }); 
    } 
    </script> 

事件觸發一個按鈕

<button id="getNextMap">Go to Next Map</button> 

後來終於使這一切發生

var qstring = 'myArgsToPass'; 
    var csv = new Array(); 

    $.ajax({ 
     url: 'mapProfileGrabber.php', 
     type: 'POST', 
     data: {q:qstring}, 
     success: function(data) { 
      csv = data.split(",");       
      $("#lonDeg").val(csv[0]); 
      $("#latDeg").val(csv[1]); 

      initMap(); 
    }