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

Posted 2023-02-23

【中文标题】谷歌地图标记不通过ajax动态显示

【英文标题】：Google map marker not displaying dynamically via ajax

【发布时间】：2013-08-26 16:07:33

【问题描述】：

我的问题是我的地图标记没有通过 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;在将一些数据添加到其中之前，但对于地图我不知道..

【问题讨论】：

Prevent caching of AJAX call的可能重复

【参考方案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

【讨论】：

仅供参考 $.ajax's cache 选项将为您执行此操作：$.ajax( cache: false, ... );