当我在地图集上专门使用草皮时,会产生错误:var nearestBuilding = turf.nearest(currentLocation, geoJson);
。我使用mapbox-gl和草皮来获取最近的建筑物。当我在没有object.push()
的情况下手动输入数据时,它可以工作,但我需要数据库中的信息。
var object = [];
for (var x = 0; x < json.length; x++) {
var
image = json[x].image == '' ? '' : "<div style='text-align:center;'><img src='" + json[x].image + "' width='100' height='75' /></div>",
number = json[x].contact == '' ? '' : "<br/>" + json[x].contact,
details = json[x].details == '' ? '' : '<br/>' + '<a href="{{ url('restaurants-and - cafe') }}/' + json[x].details + '">More Details</a>';
object.push({
type: 'Feature',
properties: {
title: json[x].name,
description: image + json[x].content + number + details,
cuisine: json[x].cuisine,
id: json[x].id,
icon: {
iconUrl: json[x].icon,
iconSize: [20, 50],
iconAnchor: [10, 5],
popAnchor: [0, 0],
className: 'custom-map-marker'
}
},
geometry: {
type: 'Point',
coordinates: [json[x].longitude, json[x].latitude]
}
});
}
var geoJson = {
type: 'FeatureCollection',
features: object
};
var currentLocation = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [121.048282, 14.548682]
}
};
map.on('load', function () {
var el = document.createElement('div');
el.className = 'currLocMarker';
marker = new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
.setLngLat(currentLocation.geometry.coordinates)
.addTo(map);
var nearestBuilding = turf.nearest(currentLocation, geoJson);
var distance = turf.distance(currentLocation, nearestBuilding);
});