我有使用Mapbox地图设置标记的代码
$(function() {
mapboxgl.accessToken = 'pk.###';
var map = new mapboxgl.Map({
container: 'map-global',
style: '..'
});
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"title": "POI Title"
},
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}
]
};
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup()
.setHTML(marker.properties.title))
.addTo(map);
});
});
它工作正常。但我想将GeoJSON
用作外部文件:
var geojson = 'file.geojson';
在这里,我遇到了一个问题 - 它不起作用:
TypeError:undefined不是一个对象(评估'" map.geojson" .features.forEach')"。
有没有办法将外部GeoJSON
文件与自定义HTML一起使用
标记
答案 0 :(得分:2)
由于您使用的是Jquery,因此可以使用getJSON
加载文件:
使用GET HTTP请求从服务器加载JSON编码的数据。
参考:http://api.jquery.com/jquery.getjson/
示例:
$.getJSON('file.geojson', function (geojson) {
geojson.features.forEach(function (marker) {
// etc
});
});
答案 1 :(得分:2)
您可以使用普通的mapbox addSource()加载外部geojson文件。
map.on('load', function() {
var url = 'http://your_geojson_file.com/some_file.geojson';
map.addSource('source_id', { type: 'geojson', data: url});
});
查看此示例: https://www.mapbox.com/mapbox-gl-js/example/live-geojson/