[英]Adding markers to map (Mapbox)
我在我的視圖上使用 mapbox 並且需要從 JSON 添加多個標記
這是我的 JSON
[
{
"name":"Thistle London Heathrow Termin",
"address1":"Bath Road",
"rating":3.0,
"lng":-0.4836,
"lat":51.4805
},
{
"name":"Ibis London Heathrow Airport",
"address1":"112 Bath Road Hayes",
"rating":3.0,
"lng":-0.430683,
"lat":51.48079
},
{
"name":"Britannia Inn",
"address1":"54 Mansfield Road",
"rating":2.0,
"lng":0.066,
"lat":51.563
},
{
"name":"Cranbrook Hotel",
"address1":"22 24 Coventry Road",
"rating":2.0,
"lng":0.069,
"lat":51.563
},
{
"name":"Park Hotel",
"address1":"327 Cranbrook Road",
"rating":2.0,
"lng":0.065,
"lat":51.568
},
{
"name":"Rest Up London",
"address1":"Driscoll House",
"rating":2.0,
"lng":-0.096403,
"lat":51.494554
},
{
"name":"Ascot Hyde Park",
"address1":"11 Craven Road",
"rating":3.0,
"lng":-0.176815,
"lat":51.514745
},
{
"name":"Fairways Bayswater",
"address1":"186 Sussex Gardens",
"rating":2.0,
"lng":-0.1748,
"lat":51.5144
},
{
"name":"Four Stars",
"address1":"26 28 Sussex Gardens",
"rating":3.0,
"lng":-0.1685,
"lat":51.5179
},
{
"name":"King Solomon",
"address1":"155 159 Golders Green Road",
"rating":3.0,
"lng":-0.21045388,
"lat":51.58082156
},
{
"name":"Somerset.",
"address1":"6 Dorset Square",
"rating":2.0,
"lng":-0.1607,
"lat":51.5229
},
{
"name":"Trinity House",
"address1":"26 Blackhorse Raod",
"rating":2.0,
"lng":-0.0356,
"lat":51.5832
},
{
"name":"Viking",
"address1":"162 Romford Road",
"rating":2.0,
"lng":0.01299262,
"lat":51.54324077
},
{
"name":"Wedgewood",
"address1":"49 51 Leinster Square",
"rating":2.0,
"lng":-0.1928,
"lat":51.51365
},
{
"name":"Kensington Suite",
"address1":"128 130 Holland Road",
"rating":3.0,
"lng":-0.2121,
"lat":51.5015
}
]
這是我如何運行腳本將地圖添加到視圖
let centerLatlng = new mapboxgl.LngLat(gon.destination_city.lng,gon.destination_city.lat);
mapboxgl.accessToken = token;
let map = new mapboxgl.Map({
container: 'map-canvas',
style: 'mapbox://styles/mapbox/streets-v9',
center:centerLatlng,
zoom: 9
});
map.addControl(new mapboxgl.NavigationControl());
});
但我想知道,我需要如何將標記添加到映射(對於 json 中的每個元素,我需要獲取經緯度)以進行映射。 因為根據文檔,我需要像這樣的 json
var geojson = { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Point',坐標:[-77.032, 38.913] },屬性:{ title: 'Mapbox',描述: '華盛頓特區' } }, { 類型:'特征',幾何:{ 類型:'點',坐標:[-122.414, 37.776] },屬性:{ 標題:'Mapbox',描述:'加利福尼亞州舊金山' } }] };
我可以用我的 json 做標記嗎
我找到了解決方法
這很簡單
像這樣
for(var i = 0; i < json.length; i++) {
var obj = json[i];
let myLatlng = new mapboxgl.LngLat(obj.lng, obj.lat);
let marker = new mapboxgl.Marker()
.setLngLat(myLatlng)
.setPopup(new mapboxgl.Popup({ offset: 25 })
.setHTML('<h3>' + obj.name + '</h3><p>' + obj.address1 + '</p>'))
.addTo(map);
}
或者使用 jQuery
$.each(json, function(i, item) {
let myLatlng = new mapboxgl.LngLat(json[i].lng, json[i].lat);
let marker = new mapboxgl.Marker()
.setLngLat(myLatlng)
.setPopup(new mapboxgl.Popup({ offset: 25 })
.setHTML('<h3>' + json[i].name + '</h3><p>' + json[i].address1 + '</p>'))
.addTo(map);
});
還有其他方法可以更快地在 imo 中工作,例如通過層添加源,geoJson 必須采用您從文檔鏈接的格式:
map.on('load', function () {
// Add an image to use as a custom marker
map.loadImage(
'img',
function (error, image) {
if (error) throw error;
map.addImage('custom-marker', image);
// Add a GeoJSON source with 2 points
map.addSource('points',geoJson);
map.addLayer(
{
'id': 'points',
'type': 'symbol',
'source': 'points',
'layout':
{
'icon-image': 'custom-marker',
// get the title name from the source's "title" property
'text-field': ['get', 'title'],
'text-font': ['Open Sans Semibold','Arial Unicode MS Bold'],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
});
這個例子可以在https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/看到
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.