谷歌地图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：属性，因为在确定是否需要移动标记之前，我需要将新对象的lat / lon /颜色与旧对象进行比较。问题是map：property未设置。我保存标记数据而不将map：属性设置到新标记数组中，然后将新标记数组复制到旧标记数组中以进行下一次比较。我应该将旧的标记对象复制到新的标记数组中！旧标记对象具有map：属性集，并允许Google映射代码知道我想要删除哪个标记。

抱歉这个愚蠢的错误，但我对Javascript很新。

富