javascript - Mapbox 自定义标记

Question

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

这是一个 ASP.NET MVC 应用程序，在我的 cshtml View 中我有:

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)中，我有代码在用户输入地址后更新 map 位置。这很好用。

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

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() 有效，但标记无效。没有显示标记(是的，我确定纬度/经度是正确的，请注意，相同的值用于 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