我有以下我喜欢干的JQuery代码。目前只有2个标记,但有30个以上,所以我需要一个干净的解决方案:
L.mapbox.accessToken = 'secret_token';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([-12.260355, 29.927956], 11);
var geoJson01 = {
features: [{
type: 'Feature',
properties: {
'marker-size': 'large',
'marker-symbol': 'embassy',
video: '<iframe src="http://www.example.com/test1.html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
},
geometry: {
type: 'Point',
coordinates: [29.91, -12.28]
}
}]
};
var geoJson02 = {
features: [{
type: 'Feature',
properties: {
'marker-size': 'large',
'marker-symbol': 'embassy',
video: '<iframe src="http://www.example.com/test2.html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
},
geometry: {
type: 'Point',
coordinates: [29.81, -12.18]
}
}]
};
var myLayer01 = L.mapbox.featureLayer().addTo(map);
var myLayer02 = L.mapbox.featureLayer().addTo(map);
myLayer01.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
var popupContent = feature.properties.video;
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 300,
maxWidth: 810
});
});
myLayer02.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
var popupContent = feature.properties.video;
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 300,
maxWidth: 810
});
});
myLayer01.setGeoJSON(geoJson01);
myLayer02.setGeoJSON(geoJson02);
我怎样才能做到这一点?
答案 0 :(得分:2)
将差异提取到数组中的对象,然后forEach
提取它: -
var markers = [
{
coordinates: [29.91, -12.28],
video: '"http://www.example.com/test1.html"'
}, {
coordinates: [29.81, -12.18],
video: '"http://www.example.com/test2.html"'
}
];
L.mapbox.accessToken = 'secret_token';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([-12.260355, 29.927956], 11);
function setMarker(obj) {
var geoJson01 = {
features: [{
type: 'Feature',
properties: {
'marker-size': 'large',
'marker-symbol': 'embassy',
video: '<iframe src=' + obj.video + ' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
},
geometry: {
type: 'Point',
coordinates: obj.coordinates
}
}]
};
var myLayer01 = L.mapbox.featureLayer().addTo(map);
myLayer01.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
var popupContent = feature.properties.video;
marker.bindPopup(popupContent, {
closeButton: false,
minWidth: 300,
maxWidth: 810
});
});
myLayer01.setGeoJSON(geoJson01);
}
markers.forEach(function(m) {
setMarker(m);
})
答案 1 :(得分:1)
这应该有效
L.mapbox.accessToken = 'secret_token';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([-12.260355, 29.927956], 11);
// new
var array = [{
features : [{
type : 'Feature',
properties : {
'marker-size' : 'large',
'marker-symbol' : 'embassy',
video : '<iframe src="http://www.example.com/test1.html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
},
geometry : {
type : 'Point',
coordinates : [29.91, -12.28]
}
}]
}, {
features : [{
type : 'Feature',
properties : {
'marker-size' : 'large',
'marker-symbol' : 'embassy',
video : '<iframe src="http://www.example.com/test2.html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>',
},
geometry : {
type : 'Point',
coordinates : [29.81, -12.18]
}
}]
}];
var layers = [];
for(var i = 0; i < array.length; i++)
{
layers[i] = L.mapbox.featureLayer().addTo(map);
layers[i].on('layeradd', function(e)
{
var marker = e.layer,
feature = marker.feature;
var popupContent = feature.properties.video;
marker.bindPopup(popupContent, {
closeButton : false,
minWidth : 300,
maxWidth : 810
});
});
layers[i].setGeoJSON(array[i]);
}