谷歌地图标记没有通过ajax动态显示

Google map marker not displaying dynamically via ajax

本文关键字:ajax 动态显示 地图 图标 谷歌      更新时间:2023-09-26

我的问题是我的地图标记没有通过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调用