如何将自定义字段传递到mapbox-gl js中以在地图上创建点? [英] How to pass custom fields into mapbox-gl js to create points on map?
问题描述
我已经使用mapbox创建了一个地图,并绘制了可以与之交互的多个自定义点.我也在使用Wordpress,并且希望使用高级自定义字段来创建每个点,以便可以由非技术人员轻松地对其进行管理.这些字段都已设置,但是我无法将它们传递到我的php模板中的javascript中.
I've created a map using mapbox and plotted multiple custom points that you can interact with. I am also using Wordpress and want to use advanced custom fields to create each point so they can easily be managed from a non-technical person. The fields are all setup, but I am having trouble passing them into the javascript in my php template.
我尝试使用循环,但无法在javascript中使用循环.这是我用来绘制点的Mapbox代码,并希望通过以下方式使用高级自定义字段:
I've tried using a loop but I can't use the loop inside javascript. Here is my Mapbox code that I am using to plot the points and want to use advanced custom fields with:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/coptmarketing/cjvi7hc4602dk1cpgqul6mz0b',
center: [-76.615573, 39.285685],
zoom: 16 // starting zoom
});
var geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"title": "Shake Shack",
"id": "shake-shack"
},
"geometry": {
"type": "Point",
"coordinates": [-76.609844, 39.286894]
}
},
{
"type": "Feature",
"properties": {
"title": "Starbucks",
"id": "starbucks"
},
"geometry": {
"type": "Point",
"coordinates": [-76.619071, 39.286649]
}
}
]
};
我已将数据存储在JSON数组中:
I've stored the data in a JSON array:
[{"title":"Shake Shack","slug":"shake-shack","latitude":"-76.609844","longitude":"39.286894"},{"title":"Starbucks","slug":"starbucks","latitude":"-76.619071","longitude":"39.286649"}]
如何将其插入geoJSON?
How do I insert this into the geoJSON?
推荐答案
弄清楚了:
首先,我创建了一个插件,用于将自定义帖子数据存储在JSON数组中,并将其存储在服务器上.每当我更新,保存或删除帖子时,此信息也会更新.这是示例JSON:
First I created a plugin that stored the custom post data in a JSON array and stored it on the server. This also updated every time I updated, saved or deleted a post. Here is the example JSON:
data = {"placeList": [{"title":"Shake Shack","slug":"shake-shack","latitude":"-76.609844","longitude":"39.286894"},{"title":"Starbucks","slug":"starbucks","latitude":"-76.619071","longitude":"39.286649"}]}
然后在php文件中,我调用了.json文件,并在我的JavaScript中,将数组插入了GeoJSON:
Then in the php file, I called the .json file and in my javascript, inserted the array into the GeoJSON:
var placeJson = data;
var geojson = {
type: "FeatureCollection",
features: [],
};
for (i = 0; i < placeJson.placeList.length; i++) {
geojson.features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [placeJson.placeList[i].latitude, placeJson.placeList[i].longitude]
},
"properties": {
"id": placeJson.placeList[i].slug,
"title": placeJson.placeList[i].title
}
});
}
这篇关于如何将自定义字段传递到mapbox-gl js中以在地图上创建点?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!