Google Maps v3使用在地圖上移動的標記

Question

http://rca2.com/mapping/thispageblinks.htm

http://rca2.com/mapping/doesnotremove.htm

如果不不斷更新xml數據，第二個示例實際上不會執行任何操作。

我正在將（最終！）我的地圖應用程序從Google v2轉換為v3。 在v2中，應用程序每5秒鍾讀入xml數據，清除標記，然后創建新標記並將其放置在地圖上。 v3中不再使用map.clearOverlays（）清除地圖疊加層的功能。 建議的解決方案是跟蹤舊標記，然后將其刪除。 在創建新標記之前，先清除循環中的標記很容易並且可行。 除了標記經常更換時閃爍的事實。 這非常令人分心，非常不受歡迎，因為這在v2中沒有發生。

我決定將新標記數據與舊標記數據進行比較。 如果位置和圖標顏色保持不變，則舊標記和新標記都將基本被忽略。 為了清楚起見，圖標顏色表示由圖標表示的車輛的狀態。 在這種情況下，應用程序將跟蹤救護車的活動，因此綠色將可用，藍色將在途中等。

該代碼可以很好地處理新標記和舊標記的檢查，但是由於某些原因，當標記（單元）移動時，它將永遠不會刪除舊標記。 我看到了有關setMap（）異步的建議。 我還看到了有關數組不是google.maps.Marker對象的建議。 我相信我的代碼可以正確處理所有這些問題，但是舊標記仍然從未刪除。

我還確保我的標記數組是全局變量。 我還使用變量side_bar_html顯示有關應該刪除哪些標記以及應該添加哪些標記的信息。 添加的標記被添加就好了。 我只是不知道下一步該去哪里。 您能提供的任何幫助將不勝感激。

function getMarkers() {

// create a new connection to get our xml data

    var Connect = new XMLHttpRequest();

// send the get request

    Connect.open("GET", xml_file, false);
    Connect.setRequestHeader("Content-Type", "text/xml");
    Connect.send(null);

// Place the response in an XML document.

    var xmlDoc = Connect.responseXML;

// obtain the array of markers and loop through it

    var marker_data = xmlDoc.documentElement.getElementsByTagName("marker");

// hide the info window, otherwise it still stays open where a potentially removed marker used to be

    infowindow.close();

// reset the side_bar and clear the arrays

    side_bar_html = "";
    markerInfo    = [];
    newMarkers    = [];
    remMarkers    = [];
    addMarkers    = [];

// obtain the attributes of each marker

    for (var i = 0; i < marker_data.length; i++) {
        var latData  = marker_data[i].getAttribute("lat");
        var lngData  = marker_data[i].getAttribute("lng");
        var minfo    = marker_data[i].getAttribute("html");
        var name     = marker_data[i].getAttribute("label");
        var icontype = marker_data[i].getAttribute("icontype");
        var unitNum  = marker_data[i].getAttribute("unitNum");
        var llIcon   = latData + lngData + icontype;
        zIndexNum    = zIndexNum + 1;

// create the new marker data needed

        var myLatLng = new google.maps.LatLng(parseFloat(latData), parseFloat(lngData));
        var marker   = {
            position:    myLatLng,
            icon:        gicons[icontype],
            title:       "",
            unitIcon:    unitNum,
            unitLLIData: llIcon,
            zIndex:      zIndexNum
        };

// add a line to the side_bar html

//        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br />';

// add an event listeners on the marker

        addInfoWindow(marker, minfo);

// save the current data for later comparison

        markerInfo.push(minfo);
        newMarkers.push(marker);
    }

// now loop thru the old marker data and compare to the new, to see if we need to remove any old markers

    var refreshIt  = true;
    var removeIt   = true;
    var currNumber = "";
    var currLLIcon = "";
    var lastNumber = "";
    var lastLLIcon = "";
    for (var i = 0; i < newMarkers.length; i++) {
        currNumber = newMarkers[i].unitIcon;
        currLLIcon = newMarkers[i].unitLLIData;
        for (var j = 0; j < oldMarkers.length; j++) {
        refreshIt  = true;
            lastNumber = oldMarkers[j].unitIcon;
            lastLLIcon = oldMarkers[j].unitLLIData;
            if (lastNumber == currNumber) {
                if (currLLIcon == lastLLIcon) {
                    refreshIt = false;
                } else {
                    refreshIt = true;
                    remMarkers.push(oldMarkers[j]);
                }
                break;
            }
        }

// if we need to refresh a marker, add it to our new array here

        if (refreshIt == true) {
            addMarkers.push(newMarkers[i]);
        }
    }

// then loop thru and see if any units are no longer on the map

    for (var j = 0; j < oldMarkers.length; j++) {
        removeIt   = true;
        lastNumber = oldMarkers[j].unitIcon;
        for (var i = 0; i < newMarkers.length; i++) {
            currNumber = newMarkers[i].unitIcon;
            if (lastNumber == currNumber) {
                removeIt = false;
                break;
            }
        }

// if we need to refresh a marker, add it to our new array here

        if (removeIt == true) {
            remMarkers.push(oldMarkers[j]);
        }
    }

// now loop thru the old markers and remove them

    for (var i = 0; i < remMarkers.length; i++) {
        var marker = new google.maps.Marker(remMarkers[i]);
        marker.setMap(null);
        side_bar_html += 'removing ' + remMarkers[i].unitIcon + '<br />';
    }

// then loop thru the new markers and add them

    for (var i = 0; i < addMarkers.length; i++) {
        var marker = new google.maps.Marker(addMarkers[i]);
        marker.setMap(map);
        side_bar_html += 'adding ' + addMarkers[i].unitIcon + '<br />';
    }

// and last save the old markers array into oldMarkers

    oldMarkers = [];
    for (var i = 0; i < newMarkers.length; i++) {
        oldMarkers.push(newMarkers[i]);
    }

// put the assembled side_bar_html contents into the side_bar div, then sleep

    document.getElementById("side_bar").innerHTML = side_bar_html;
    setTimeout('getMarkers()', 5000);
}

出於上下文的目的，這里的代碼確實清除了舊標記，但是許多（不是全部）或標記在刷新時會閃爍，即使它們實際上並不移動機芯。

    function getMarkers() {

// create a new connection to get our xml data

    var Connect = new XMLHttpRequest();

// send the get request

    Connect.open("GET", xml_file, false);
    Connect.setRequestHeader("Content-Type", "text/xml");
    Connect.send(null);

// Place the response in an XML document.

    var xmlDoc = Connect.responseXML;

// obtain the array of markers and loop through it

    var marker_data = xmlDoc.documentElement.getElementsByTagName("marker");

// hide the info window, otherwise it still stays open where the removed marker used to be

    infowindow.close();

// now remove the old markers

   for (var i = 0; i < oldMarkers.length; i++) {
        oldMarkers[i].setMap(null);
    }

    oldMarkers.length = 0;

// reset the side_bar and clear the arrays

    side_bar_html = "";
    markerInfo    = [];
    newMarkers    = [];

// obtain the attributes of each marker

    for (var i = 0; i < marker_data.length; i++) {
        var latData  = marker_data[i].getAttribute("lat");
        var lngData  = marker_data[i].getAttribute("lng");
        var minfo    = marker_data[i].getAttribute("html");
        var name     = marker_data[i].getAttribute("label");
        var icontype = marker_data[i].getAttribute("icontype");
        var unitNum  = marker_data[i].getAttribute("unitNum");
        zIndexNum    = zIndexNum + 1;

// create the new marker data needed

        var myLatLng = new google.maps.LatLng(parseFloat(latData), parseFloat(lngData));
        var marker   = new google.maps.Marker({
            position:    myLatLng,
            icon:        gicons[icontype],
            title:       "",
            unitIcon:    unitNum,
            zIndex:      zIndexNum
        });

// add a line to the side_bar html

        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br />';

// add an event listeners on the marker

        addInfoWindow(marker, minfo);

// save the current data for later comparison

        markerInfo.push(minfo);
        newMarkers.push(marker);
        oldMarkers.push(marker);
    }

// now add the new markers

   for (var i = 0; i < newMarkers.length; i++) {
        newMarkers[i].setMap(map);
    }

// put the assembled side_bar_html contents into the side_bar div, then sleep

    document.getElementById("side_bar").innerHTML = side_bar_html;

    setTimeout('getMarkers()', 5000);
}

Answer 1

終於找到了解決方案。 該過程正在讀取新的xml數據，並將其與保存的xml數據進行比較，以確定是否需要移動標記或在地圖上以其他顏色顯示標記。

創建新的標記對象時，沒有設置map：屬性，因為在確定是否需要移動標記之前，需要將新對象的經度/緯度/顏色與舊對象進行比較。 問題在於地圖：未設置屬性。 我將沒有設置map：屬性的標記數據保存到新的標記數組中，然后將新的標記數組復制到舊的標記數組中進行下一個比較。 我應該將舊的標記對象復制到新的標記數組中！ 舊的標記對象具有map：屬性集，並且該標記對象允許Google映射代碼知道我要刪除的標記。

很抱歉出現了這個愚蠢的錯誤，但是我對Javascript還是很陌生。

豐富