javascript - Google map 标记未通过 ajax 动态显示

Question

我的问题是我的 map 标记没有通过ajax动态更新，一旦我的xml文件被更新， map 标记就会相应地改变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;在添加一些数据之前，但对于 map 我不知道..

Answer 1

xml正在被浏览器缓存，添加一个每次内容改变时都会改变的URL参数(我通常使用当前时间的函数)

function loadMarker() {
    var page = new Date().getTime();
    $.ajax({
        url: "js/datatesting.xml,
        dataType: 'xml',
        data: {page: page},
        success: onLoadMarker
    });
};

相关问题: Prevent caching of AJAX call