MapQuest,试图保存标记,以便我以后可以用新位置替换它

时间:2018-04-22 18:38:21

标签: javascript mapquest

下面我发布了工作代码和无效代码。

没有错误,这没有任何问题。

function addMarkerToMap(map, markerX, markerY, markerPopupText, symbol) {
    L.marker([ markerX, markerY ], {
        icon : L.mapquest.icons.marker({
            primaryColor : '#F2407F',
            secondaryColor : '#FB5998',
            shadow : false,
            size : 'md',
            symbol : symbol
        }),
        draggable : false
    }).bindPopup(markerPopupText).addTo(map);

    boundsForZoomAllPoints.add(new MQA.Poi({
        lat : markerX,
        lng : markerY
    }));
}

但是我想将标记保存在地图中,以便我可以将其删除并在以后替换它。

function updateMap(openSourceMap, liveTrackingLocations, mapMetaData) {
        var mapMetaData = trackingMetaData.mapMetaData ;
        for (var i = 0; i < mapMetaData.length; i++) {
            var key = mapMetaData[i].rideIDNPK ;
            var newMarker, existingMarker ;
            if (liveTrackingLocations[key] != undefined && liveTrackingLocations[key] != null) {
                existingMarker = liveTrackingLocations[key] ; 
                openSourceMap.remove(existingMarker) ;
            }
            newMarker = addMarkerToMap(openSourceMap, mapMetaData[i].currentGpsX, mapMetaData[i].currentGpsY, mapMetaData[i].routeName, 'C') ;  
            liveTrackingLocations[key] = newMarker ; 
        }
    }

我从此方法返回标记,但这会导致错误。

function addMarkerToMap(map, markerX, markerY, markerPopupText, symbol) {
    var marker = L.marker([ markerX, markerY ], {
        icon : L.mapquest.icons.marker({
            primaryColor : '#F2407F',
            secondaryColor : '#FB5998',
            shadow : false,
            size : 'md',
            symbol : symbol
        }),
        draggable : false
    }).bindPopup(markerPopupText).addTo(map); <!-- Here the error occurs -->

    boundsForZoomAllPoints.add(new MQA.Poi({
        lat : markerX,
        lng : markerY
    }));
    return marker;
}

Chrome控制台上的错误,位于

下方
Uncaught TypeError: Cannot read property 'appendChild' of undefined
    at e._initIcon (mapquest.js:10)
    at e.onAdd (mapquest.js:10)
    at e._layerAdd (mapquest.js:10)
    at e.whenReady (mapquest.js:10)
    at e.addLayer (mapquest.js:10)
    at e.addTo (mapquest.js:10)
    at addMarkerToMap (mapQuestHelper.js:330)
    at updateMap (onLoadTrackingDashboardMapQuestView:1936)
    at HTMLDocument.<anonymous> (onLoadTrackingDashboardMapQuestView:4594)
    at j (jQuery-2.1.4.min.js:2)
_initIcon @ mapquest.js:10
onAdd @ mapquest.js:10
_layerAdd @ mapquest.js:10
whenReady @ mapquest.js:10
addLayer @ mapquest.js:10
addTo @ mapquest.js:10
addMarkerToMap @ mapQuestHelper.js:330
updateMap @ onLoadTrackingDashboardMapQuestView:1936
(anonymous) @ onLoadTrackingDashboardMapQuestView:4594
j @ jQuery-2.1.4.min.js:2
fireWith @ jQuery-2.1.4.min.js:2
ready @ jQuery-2.1.4.min.js:2
I @ jQuery-2.1.4.min.js:2
mapquest.js:10 TypeError: Cannot read property 'mapType' of undefined
    at e.value (mapquest.js:23)
    at e.value (mapquest.js:23)
    at mapquest.js:23
M @ mapquest.js:10
L @ mapquest.js:10
(anonymous) @ mapquest.js:23
Promise.catch (async)
value @ mapquest.js:23
value @ mapquest.js:23
addTo @ mapquest.js:10
addControl @ mapquest.js:10
s @ mapquest.js:10
e @ mapquest.js:10
l @ mapquest.js:10
initializeMapQuest @ mapQuestHelper.js:3
(anonymous) @ onLoadTrackingDashboardMapQuestView:1861

我错过了什么?

1 个答案:

答案 0 :(得分:0)

我找到了答案here

从上述网站中摘录(以免失去答案的有效性)

<html>
    <head>
        <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.1.0/mapquest.css"/>
        <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.1.0/mapquest.js"></script>
        <script type="text/javascript">
        var map, fg;

        function doit() {
         fg.removeLayer(fg.getLayers()[0]);
         L.marker([39.744979,-104.989506]).addTo(fg);
        }

        window.onload = function() {
            L.mapquest.key = KEY;
            fg = L.featureGroup();
            map = L.mapquest.map('map', {
                center: [39.750523,-104.999734],
                layers: [L.mapquest.tileLayer("map"), fg],
                zoom: 12
            });
            L.marker([39.750523,-104.999734]).addTo(fg);
        }
        </script>
    </head>

    <body style="border: 0; margin: 0;">
        <div id="map" style="width: 800px; height: 530px;"></div>
        <input type="submit" onclick="doit();" value="doit"/>
    </body>
</html>

但这对我不起作用

    fg.removeLayer(fg.getLayers()[0]);

有效的是

    var layers = fg.getLayers() ;
    for (var i = 0 ; i < layers.length ; i++) {
        fg.removeLayer(layers[i]) ;
    }