更新/重新加载标记而无需重新加载谷歌地图 [英] Update / reload markers without reloading google map
问题描述
我正在使用以下代码生成标记引脚。它加载完美,但在这张地图的左边我有过滤器。如何在不重新加载地图的情况下重新加载标记?这已经引起了一些挫折,所以任何帮助将不胜感激。
I'm using the following code to generate marker pins. It loads perfectly, but to the left of this map I have filters. How do I reload the markers without reloading the map? This has been causing some frustration so any help would be appreciated.
非常感谢,
//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"> </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"> </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);
});
}
});
});
推荐答案
希望这能回答你的问题:
Hopefully this is answering what you're asking:
创建标记时,可以使用map参数设置其地图并显示它。或者,如果要将其绑定到过滤器,则可以忽略地图参数并稍后使用marker.setMap(map)。
When you create a marker, you can use the 'map' parameter to set its map and have it show up. Or, if you want to tie it to a filter, you can ignore the map paramter and use marker.setMap(map) later.
// 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 (null)删除标记和marker.setMap(map)以重新添加它。
If you want to 'remove' and 'add' markers with events, you can use marker.setMap(null) to remove the marker and marker.setMap(map) to re-add it.
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,然后在地图上重置它们。
Update: So if you wanted to 'reload' the markers, you could traverse through and array of currently active markers, set their maps to null, and then reset them on the map.
这篇关于更新/重新加载标记而无需重新加载谷歌地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!