Question

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

但他们会以非常不同的方式创造标记。

方法A：
在“点击更改标记颜色”示例中...
他们从geoJSON对象创建标记，他们将featureLayer添加到地图并使用setGeoJSON将该geoJSON对象应用于featureLayer。

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

<小时/> 在方法A中，我似乎无法确定在geoJSON对象中添加可拖动值的位置......或者如果可能的话。

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

任何帮助将不胜感激...谢谢！

Answer 1

这个问题已经被提出两年多了，而且我不知道我的答案是否仍然与问题有关。我希望答案可以帮助那些面临同样问题的人。

在下面的代码中，我使用位于JS和CSS的mapbox.js v3.0.1 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'
});

在地图中点击＆＃39;方法使用以下代码：

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公共访问令牌更改访问令牌。

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

使用mapbox.js创建一个可在用户点击时更改颜色的可拖动标记（图钉）

1 个答案: