谷歌地图v3使用在地图上移动的标记

Google Maps v3 using markers that move about the map

本文关键字:移动 地图 v3 谷歌地图      更新时间:2023-09-26

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

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

第二个示例在没有持续更新 xml 数据的情况下实际上不会做任何事情。

我正在将(终于!)我的地图应用程序从Google v2转换为v3。在 v2 中,应用程序每 5 秒读取一次 xml 数据,清除标记,然后创建新标记并将其放置在地图上。使用 map.clearOverlays() 清除地图叠加的功能在 v3 中不再存在。建议的解决方案是跟踪旧标记,然后将其删除。在创建新标记之前清除循环中的标记很容易,并且有效。除了标记在更换时经常闪烁的事实。这非常分散注意力,并且非常不可取,因为这在 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);
}

终于找到了解决方案。该过程正在读取新的xml数据,并将其与保存的xml数据进行比较,以确定是否需要在地图上移动或以不同的颜色显示标记。

当我创建一个新的标记对象时,我没有设置 map: 属性,因为在确定是否需要移动标记之前,我需要将新对象的纬度/纬度/颜色与旧对象进行比较。问题是地图:未设置属性。我将没有 map: 属性集的标记数据保存到新的标记数组中,然后将新的标记数组复制到旧的标记数组中进行下一次比较。我应该将旧的标记对象复制到新的标记数组中!旧的标记对象设置了map:属性,这允许Google映射代码知道我要删除哪个标记。

很抱歉这个愚蠢的错误,但我对Javascript很陌生。