2
我的問題是我的地圖標記沒有通過ajax動態更新，一旦我的XML文件被更新，地圖標記將相應地更改爲xml，但它不工作，我必須重新運行整個網站才能從xml中獲得更改（刷新不起作用）。Google地圖標記不能通過ajax動態顯示
這裏是我的代碼
function createTooltip(marker, key) {
//create a tooltip
var tooltipOptions = {
marker: marker,
content: places[key].tooltip_html,
cssClass: 'tooltip' // name of a css class to apply to tooltip
};
var tooltip = new Tooltip(tooltipOptions);
}
function refresh() {
setInterval(function() {
loadMarker();
}, 5000);
};
function initialize() {
var initialLocation;
var northpole = new google.maps.LatLng(90, 105);
var KL = new google.maps.LatLng(3.1597, 101.7000);
var browserSupportFlag = new Boolean();
var map;
var marker;
var mapOptions;
var mapDiv = document.getElementById("map_canvas");
if (places.length) {
mapOptions = {
center: new google.maps.LatLng(3.1597, 101.7000),
maxZoom: 21,
zoom: 17,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT
}
};
map = new google.maps.Map(mapDiv, mapOptions);
var markers = [];
for (var key in places) {
(function (myPlace) {
if (myPlace) {
var icon = {
url: myPlace.icon_html,
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(8, 41)
};
var shadow = {
url: "image/shadow.png",
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(8, 41)
};
var marker = new google.maps.Marker({
map: map,
shadow: shadow,
url: myPlace.URL_html,
icon: icon,
position: new google.maps.LatLng(myPlace.position.lat, myPlace.position.lng)
});
markers.push(marker);
createTooltip(marker, key);
google.maps.event.addListener(marker, 'click', function() {
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function() {
marker.setAnimation(null);
}, 2000);
openNewBackgroundTab(marker.url);
});
function openNewBackgroundTab(url) {
var a = document.createElement("a");
a.href = url;
var evt = document.createEvent("MouseEvents");
//the tenth parameter of initMouseEvent sets ctrl key
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
true, false, false, false, 0, null);
a.dispatchEvent(evt);
}
}
})(places[key]);
}
}
var markerCluster = new MarkerClusterer(map, markers);
// Try W3C Geolocation (Preferred)
if (navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({
position: initialLocation,
icon: 'image/footprint.png',
title: 'You are here !'
});
$('#findout').on('shown', function (e) {
google.maps.event.trigger(map, 'resize');
marker.setMap(map);
map.setCenter(initialLocation);
});
}, function() {
handleNoGeolocation(browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag === true) {
alert("Geolocation service failed.");
initialLocation = KL;
} else {
alert("Stop using IE");
initialLocation = northpole;
}
map.setCenter(initialLocation);
}
}
google.maps.event.addDomListener(window, "load", initialize);
var places = Array();
function loadMarker() {
$.ajax({
url: "js/datatesting.xml",
dataType: 'xml',
success: onLoadMarker
});
};
function onLoadMarker(data) {
$(data).find("merchantMarker").each(function() {
places.push({
URL_html: "" + $(this).find('merchantProfileUrl').text() + "", //mapshop profile url
tooltip_html: "<div id='tooltips'>\n\
<div class='cover' style='background-image:url(image/default.jpg);'>\n\
<table style='margin-left:20px;'>\n\
<tr>\n\
<td><img class='photo img-circle' src='" + $(this).find('merchantProfilPicture').text() + "'>\n\
</td>\n\
</tr>\n\
<tr>\n\
<th class='text-center'>\n\
" + $(this).find('merchantName').text() + "\n\
</th>\n\
</tr>\n\
</table>\n\
</div>\n\
<div class='status'>\n\
<p>" + $(this).find('merchantAboutUs').text() + "</p>\n\
</div>\n\
</div>",
icon_html: '' + $(this).find('merchantMapMarker').text() + '', //mapshop marker
position: {
lat: $(this).find('merchantLat').text(),
lng: $(this).find('merchantLon').text()
} // shop lat and lon
});
});
};
$(document).ready(function() {
$('#findout').click(function() {
$('#suggestion').hide();
$('#function_stream').hide();
$('#function_me').hide();
$('#function_findout').show();
});
loadMarker();
refresh();
});
我不知道有什麼不對的地方，請賜教您的幫助表示讚賞。
修訂
var page = new Date().getTime();
$.ajax({
url:"js/datatesting.xml",
dataType: 'xml',
data: {page: page},
success: onLoadMarker
});
和出現其他問題，可我知道如何刪除現有的標記？並用新的替換它？因爲現在新的標記堆疊在舊的標記上，如果我沒有弄錯，通常我會使用$（＃something）.children（）。remove;在添加一些數據之前，但對於地圖我不知道。
可能重複（http://stackoverflow.com/questions/367786/prevent-caching-of-ajax-call） – geocodezip