谷歌地图标记没有通过ajax动态显示
Google map marker not displaying dynamically via ajax
我的问题是我的地图标记没有通过ajax动态更新,一旦我的xml文件被更新,地图标记就会相应地更改为xml,但它不起作用,我必须重新运行整个网站才能从xml中获得更改(刷新也不起作用)。
这是我的代码
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;在添加一些数据之前,但对于地图我不知道。。
浏览器正在缓存xml,添加一个URL参数,该参数在每次内容更改时都会更改(我通常使用当前时间的函数)
function loadMarker() {
var page = new Date().getTime();
$.ajax({
url: "js/datatesting.xml,
dataType: 'xml',
data: {page: page},
success: onLoadMarker
});
};
相关问题:阻止缓存AJAX调用
相关文章:
- 动态显示JSON文件内容
- 如何将(a*b)两个输入文本值相乘,并在javascript中随文本变化动态显示
- Highcharts:根据表单输入动态显示数据
- ImageMapster可以动态显示和隐藏图像选择崩溃
- AngularJS动态显示多条记录
- Jquery Selected plugin - 由 Ajax 动态填充列表
- 使用 AJAX 动态持续加载内容
- 动态显示/添加具有不同字段的相同表单到页面
- 在轨道上的 Ruby 文本字段中动态显示数据
- 使用 Node.js 和 socket.io 和 fs 动态显示图像
- 基于ajax动态定位列表项
- jCarousel通过Ajax动态加载内容
- 在调用AJAX之后显示ng控制器的内容;作为“;作用
- 在两列中动态显示产品
- Jquery Chosen插件-通过Ajax动态填充列表时显示加载图标
- PHP、MySQL 和 Ajax:动态显示默认数据、选择现有数据或添加新数据
- 谷歌地图标记没有通过ajax动态显示
- 可以't使用AJAX动态显示多个谷歌地图标记
- 如何发送表单数据并在同一页面中使用ajax动态显示它们
- 如何显示用AJAX动态生成的隐藏元素