Mapbox 自定义标记

Question

我尝试通过他们的文档示例逐字添加自定义 mapbox 标记，但它没有显示在地图上。没有脚本错误，后续代码运行，除了不可见之外没有任何失败迹象。

这是一个 ASP.NET MVC 应用程序，在我的 cshtml 视图中我有：

L.mapbox.accessToken = 'my token';

var map = L.mapbox.map('map', 'my account').setView([32.361, -96.185], 6);
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.keyboard.disable();

这是在文档正文的副本中编写的，运行良好。

在我的 .js 文件 (knockout) 中，我有代码在用户输入地址后更新地图位置。这很好用。

如果我像这样添加一个基本的非自定义标记，它显示正常：

var leaflet = map.setView(L.latLng(features.center[1], features.center[0]), 16);
L.marker([features.center[1], features.center[0]]).addTo(leaflet);

完美，在正确的位置显示了标记...但我需要不同的颜色和其他一些小的自定义设置。

根据他们的网站，simplest implementation of adding a single marker:

map.setView(L.latLng(features.center[1], features.center[0]), 16);

L.mapbox.featureLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [
            features.center[1], features.center[0]
        ]
    },
    properties: {
        title: 'Peregrine Espresso',
        description: '1718 14th St NW, Washington, DC',
        // one can customize markers by adding simplestyle properties
        // https://www.mapbox.com/guides/an-open-platform/#simplestyle
        'marker-size': 'large',
        'marker-color': '#BE9A6B',
        'marker-symbol': 'cafe'
    }
}).addTo(map);

setView() 有效，但标记无效。没有显示标记（是的，我确定 lat/lon 是正确的，请注意相同的值用于 L.marker() 方法，除非它们应该被不同地采用......文档留下一些不足之处）。

我已经尝试了从昨天到今天早上我能找到的这个 geojson 方法的几乎所有其他示例，其中包括使用图层就绪事件、图层创建事件和其他一些我不知道的方法。现在不记得了。

谁能看出我做错了什么？

Answer 1

检查您的 GeoJSON 坐标。顺序必须是经度，纬度（与setView相反）

var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([40, -74.50], 9);

L.mapbox.featureLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
        type: 'Point',
        // coordinates here are in longitude, latitude order because
        // x, y is the standard for GeoJSON and many formats
        coordinates: [
             -74.50, 40
        ]
    },
    properties: {
        title: 'Peregrine Espresso',
        description: '1718 14th St NW, Washington, DC',
        // one can customize markers by adding simplestyle properties
        // https://www.mapbox.com/guides/an-open-platform/#simplestyle
        'marker-size': 'large',
        'marker-color': '#BE9A6B',
        'marker-symbol': 'cafe'
    }
}).addTo(map);

看看这个Example

Mapbox 自定义标记

Mapbox Custom Marker

javascript

leaflet

mapbox