如何在创建地图框图后更新GeoJSON?

时间:2015-02-16 20:39:53

标签: javascript jquery mapbox geojson

我有这个HTML:

<div id="clickthis"><p>addGeoJSON</p></div>
<div id='raw'></div>
<div id='map'></div>

这是我的javascript代码:

var geojson = [
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-77.03238901390978,38.913188059745586]
    },
    "properties": {
      "title": "Mapbox DC",
      "description": "1714 14th St NW, Washington DC",
      "marker-color": "#fc4353",
      "marker-size": "large",
      "marker-symbol": "monument"
    }
  },
  {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-122.414, 37.776]
    },
    "properties": {
      "title": "Mapbox SF",
      "description": "155 9th St, San Francisco",
      "marker-color": "#fc4353",
      "marker-size": "large",
      "marker-symbol": "harbor"
    }
  }
];
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwcGllc3RpY2tlciIsImEiOiJIn0.IgCoorxIUvE0CjcPriROeQ';
var map = L.mapbox.map('map', 'mappiesticker.kh78ogof').setView([34, -118.50], 9);

$('#clickthis').click(function(){
  alert('alkr');
  dataLayer = L.mapbox.featureLayer(geojson);
  dataLayer.addTo(map);
})

当我点击该div时警报会触发,但没有其他任何事情发生。我尝试使用.setGeoJSON函数,但它返回undefined。我的结论是,只有在创建地图时才使用,而不是在创建地图后添加GeoJSON

1 个答案:

答案 0 :(得分:1)

我在使用您的令牌时遇到401错误:

  

无法加载资源:服务器响应状态为401(未授权)

当我使用Mapbox的示例令牌和地图(请注意,您应该使用自己的令牌和地图)时,它非常好:

L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';

var map = L.mapbox.map('mapbox', 'examples.map-i86nkdio', {
    'center': [0, 0],
    'zoom': 1
});

关于Plunker的工作示例:http://plnkr.co/edit/wrlC7AAHLBWsDgzk8PRw?p=preview

我会仔细检查您的帐号和地图ID。