文章/答案/技术大牛

发布

社区首页 >问答首页 >谷歌地图v3使用移动地图的标记

问谷歌地图v3使用移动地图的标记
EN

Stack Overflow用户

提问于 2013-11-16 01:38:38

回答 1查看 578关注 0票数 0

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);
}

为了上下文的目的，下面是清除旧标记的代码，但是许多标记(不是全部)或标记在刷新时会闪烁，即使它们实际上没有移动loaction。

    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);
}

javascript

google-maps-api-3

回答 1

Stack Overflow用户

发布于 2013-11-30 20:50:01

终于想出了解决办法。这个过程是读取新的xml数据，并将其与保存的xml数据进行比较，以确定是否需要在地图上移动或显示不同颜色的标记。

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

抱歉，我犯了个愚蠢的错误，但我对Javascript很陌生。

富足

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20013585

复制

相似问题

问谷歌地图v3使用移动地图的标记
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌地图v3使用移动地图的标记EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌地图v3使用移动地图的标记
EN