javascript - 使用mapbox.js创建一个可拖动的标记(图钉)，单击时会改变颜色

Question

mapbox 的文档中有两个相关示例:
Change Marker Color on Click和 Draggable Marker

但是他们以非常不同的方式创建标记。

方法A:
在“单击时更改标记颜色”示例中...
他们从 geoJSON 对象创建标记，将 featureLayer 添加到 map 并使用 setGeoJSON 将该 geoJSON 对象应用到 f​​eatureLayer。

方法B:
在“可拖动标记”示例中...
他们通过L.marker创建一个新的标记对象，然后使用marker.addTo(map)将其添加到 map

<小时/>在方法 A 中，我似乎无法弄清楚在 geoJSON 对象中的何处添加可拖动值...或者是否可能。

在方法 B 中，我似乎无法弄清楚如何在创建标记后更改标记颜色。没有像“单击时更改标记颜色”示例中那样可迭代的初始 geoJSON 对象。但是我发现我可以通过 map.featureLayer.eachLayer 迭代图层，并且我可以成功地看到我创建的引脚...我只是没有看到任何我可以更改为的“标记颜色”属性或类似属性影响标记的颜色。

如有任何帮助，我们将不胜感激...谢谢!

Answer 1

这个问题已经被问了两年多了，我不知道我的回答是否仍然与所问的问题相关。我希望这个答案可以帮助那些和我遇到同样问题的人。

在下面的代码中我使用mapbox.js v3.0.1位于JS和CSS https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js和 https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css分别

map 对象是使用以下代码初始化的:

var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([-7.9, 112.6], 16);

然后我使用以下代码将红色标记初始化为 redIcon 对象:

var redIcon = L.mapbox.marker.icon({
    'marker-size': 'small',
    'marker-symbol': 'circle',
    'marker-color': '#f00'
});

在 map “点击”方法中使用以下代码:

var circleMarker;
map.on('click', function(e) {

    circleMarker =
        L.marker([e.latlng.lat, e.latlng.lng],
            {icon: L.mapbox.marker.icon({
            'marker-size': 'small',
            'marker-symbol': 'circle',
            'marker-color': '#fa0'
            }),
            draggable: true
        }).addTo(map);

    var originLatLng;

    // listen to the marker dragstart event
    circleMarker.on('dragstart', function (e) {
        originLatLng = circleMarker.getLatLng();
        console.log(originLatLng);
    });

    // listen to the marker dragend event
    circleMarker.on('dragend', function (e) {
        console.log(circleMarker.getLatLng());
    });

    // listen to the marker click event
    circleMarker.on('click', function(e){
        console.log(e);
        this.setIcon(redIcon);
    });
});

请参阅以下JSFiddle看看它的实际效果。不要忘记在 Javascript 部分中使用 Mapbox 公共(public)访问 token 更改访问 token 。

谢谢，希望这会有所帮助。