10

当我在我的 mapbox 上使用 turf 时,它会产生一个错误,特别是这一行: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);
});
4

0 回答 0