为 Leaflet 解析 Foursquare API JSON
Parsing Foursquare API JSON for Leaflet
我正试图在从 Foursquare 拉来的传单上绘制一个 JSON,但我很难让它显示出来。
这是一个使用 JSON 来自纽约开放数据的工作脚本。
fetch('complaintdata.json')
.then(function (response) {
// Read data as JSON
return response.json();
})
.then(function (data) {
// Create the Leaflet layer for the data
var complaintData = L.geoJson(data, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: myIcon});
},
onEachFeature: function (feature, layer) {
layer.on('click', function () {
// This function is called whenever a feature on the layer is clicked
console.log(layer.feature.properties);
// Render the template with all of the properties. Mustache ignores properties
// that aren't used in the template, so this is fine.
var sidebarContentArea = document.querySelector('.sidebar-content');
console.log(sidebarContentArea);
sidebarContentArea.innerHTML = Mustache.render(popupTemplate, layer.feature.properties);
});
}
});
// Add data to the map
complaintData.addTo(map);
});
这是使用 Google 地图的 working example,但我很难将其转移到 Leaflet。
这是 JSON 我想为以下对象复制此过程:
您需要先获取数据,然后遍历对象以构建标记和弹出内容。
您的 geojson 似乎不符合本机 L.geoJSON 内置方法,因此像处理常规 JavaScript 对象一样遍历对象。
另外通知你,我使用 axios 来获取响应。
import axios from "axios";
const url =
"https://api.foursquare.com/v2/venues/search?near=London&categoryId=4bf58dd8d48988d14c941735&client_id=BOCHQZ4NF0D2NNFP2HM0INIKPUESPUX3RMRDUX02MPWIYSM2&client_secret=EDNX150PKLS4SMRHWL21Q0KLBAQXYQUQV5RAZI0HZSA1IYGG&v=20161111";
let geoJson = {};
axios.get(url).then(response => {
geoJson = { ...response.data.response.venues };
// console.log(geoJson);
for (let key in geoJson) {
let restaurant = geoJson[key];
// console.log(restaurant);
const { lat, lng, address } = restaurant.location;
const { name } = restaurant;
const popupContent = `<b>Name</b>: ${name}
<br> <b>Address</b>: ${address}
<br> <b>Lat</b>: ${lat},
<br> <b>Lon</b>: ${lng}
`;
L.marker([lat, lng], { icon: customMarker })
.bindPopup(popupContent)
.addTo(map);
}
});
我正试图在从 Foursquare 拉来的传单上绘制一个 JSON,但我很难让它显示出来。
这是一个使用 JSON 来自纽约开放数据的工作脚本。
fetch('complaintdata.json')
.then(function (response) {
// Read data as JSON
return response.json();
})
.then(function (data) {
// Create the Leaflet layer for the data
var complaintData = L.geoJson(data, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: myIcon});
},
onEachFeature: function (feature, layer) {
layer.on('click', function () {
// This function is called whenever a feature on the layer is clicked
console.log(layer.feature.properties);
// Render the template with all of the properties. Mustache ignores properties
// that aren't used in the template, so this is fine.
var sidebarContentArea = document.querySelector('.sidebar-content');
console.log(sidebarContentArea);
sidebarContentArea.innerHTML = Mustache.render(popupTemplate, layer.feature.properties);
});
}
});
// Add data to the map
complaintData.addTo(map);
});
这是使用 Google 地图的 working example,但我很难将其转移到 Leaflet。
这是 JSON 我想为以下对象复制此过程:
您需要先获取数据,然后遍历对象以构建标记和弹出内容。
您的 geojson 似乎不符合本机 L.geoJSON 内置方法,因此像处理常规 JavaScript 对象一样遍历对象。
另外通知你,我使用 axios 来获取响应。
import axios from "axios";
const url =
"https://api.foursquare.com/v2/venues/search?near=London&categoryId=4bf58dd8d48988d14c941735&client_id=BOCHQZ4NF0D2NNFP2HM0INIKPUESPUX3RMRDUX02MPWIYSM2&client_secret=EDNX150PKLS4SMRHWL21Q0KLBAQXYQUQV5RAZI0HZSA1IYGG&v=20161111";
let geoJson = {};
axios.get(url).then(response => {
geoJson = { ...response.data.response.venues };
// console.log(geoJson);
for (let key in geoJson) {
let restaurant = geoJson[key];
// console.log(restaurant);
const { lat, lng, address } = restaurant.location;
const { name } = restaurant;
const popupContent = `<b>Name</b>: ${name}
<br> <b>Address</b>: ${address}
<br> <b>Lat</b>: ${lat},
<br> <b>Lon</b>: ${lng}
`;
L.marker([lat, lng], { icon: customMarker })
.bindPopup(popupContent)
.addTo(map);
}
});