将GeoJSON标记加载到MapBox中

时间:2013-02-26 04:04:59

标签: javascript maps geojson mapbox

我正在试图找出如何将lon / lat坐标上的GeoJSON列表加载到MapBox地图中。我觉得我很接近,我似乎无法让它真正起作用。

我在这里设置了一个演示页面:http://sandbox.charliehield.com/mapbox/

这是GeoJSON文件:

{
  "type": "MultiPoint",
  "coordinates": [
    [
      "-105.277803",
      "40.006977"
    ],
    [
      "-93.304988",
      "44.947198"
    ],
    [
      "151.206990",
      "-33.867487"
    ]
  ]
}

HTML只是:

<div id="map"></div>

和JS:

var map = mapbox.map('map');
map.addLayer(mapbox.layer().id('examples.map-zr0njcqy'));
map.ui.zoomer.add();

// example.geojson is a well-formed GeoJSON document. For this
// style, the file must be on the same domain name as the map,
// or loading will not work due to cross-domain request restrictions

var markers = mapbox.markers.layer().url('markers.geojson');
mapbox.markers.interaction(markers);
map.addLayer(markers);

// Zoom and center the map
map.zoom(2).center({ lat: 39.74739, lon: -105 });

2 个答案:

答案 0 :(得分:2)

看起来您需要使用geometry对象和键值配对更明确地格式化geojson。请参阅http://mapbox.com/mapbox.js/example/custom-marker-tooltip作为示例。

答案 1 :(得分:0)

我将geojson加载到我的mapbox地图时遇到了同样的问题。 JS中的评论实际上指出了原因:存在跨域请求限制。

您可以查看same origin policy,然后您希望在其他地方运行该应用程序。