我正在尝试将GeoJSON Feed中的图像显示在工具提示上。
我正在引用一个脚本，该脚本在工具提示中显示自定义图像（但不是来自geojson Feed）。所以我试图将两者结合起来，但我不知道该怎么做。正在阅读mapbox和LeafletJS API文档。
非常感谢任何建议或解决方案。
我有什么：
// for clickable coords //
var latitude = document.getElementById('latitude');
var longitude = document.getElementById('longitude');
// dark map example + set views //
var map = L.mapbox.map('map', 'examples.map-y7l23tes')
.setView([40.70319876407339, -74.03961181640625], 12);
L.control.locate().addTo(map);
// click to add coords //
map.on('click', function(e) {
window[e.type].innerHTML = e.containerPoint.toString() + ', ' + e.latlng.lng.toString()+ ' XsupX ' + e.latlng.lat.toString();
latitude.value = e.latlng.lat.toString();
longitude.value = e.latlng.lng.toString();
var click = document.getElementById('click'); });
// grip JSON //
var featureLayer = L.mapbox.featureLayer()
.loadURL('/locations.json')
.addTo(map);
我引用的脚本包括自定义图片，但没有GeoJSON Feed作为图片的来源。
var map = L.mapbox.map('map', 'examples.map-9ijuk24y');
var geoJson = [{
type: 'Feature',
"geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
"properties": {
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Cherry_Blossoms_and_Washington_Monument.jpg/320px-Cherry_Blossoms_and_Washington_Monument.jpg",
"url": "https://en.wikipedia.org/wiki/Washington,_D.C.",
"marker-symbol": "star",
"city": "Washington, D.C."
}
}, {
type: 'Feature',
"geometry": { "type": "Point", "coordinates": [-87.63, 41.88]},
"properties": {
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Chicago_sunrise_1.jpg/640px-Chicago_sunrise_1.jpg",
"url": "https://en.wikipedia.org/wiki/Chicago",
"city": "Chicago"
}
}, {
type: 'Feature',
"geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
"properties": {
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYC_Top_of_the_Rock_Pano.jpg/640px-NYC_Top_of_the_Rock_Pano.jpg",
"url": "https://en.wikipedia.org/wiki/New_York_City",
"city": "New York City"
}
}];
// Add custom popups to each using our custom feature properties
map.featureLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
// Create custom popup content
var popupContent = '<a target="_blank" class="popup" href="' + feature.properties.url + '">' +
'<img src="' + feature.properties.image + '">' +
' <h2>' + feature.properties.city + '</h2>' +
'</a>';
// http://leafletjs.com/reference.html#popup
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 320
});
});
// Add features to the map
map.featureLayer.setGeoJSON(geoJson);
map.setView([45.908, -78.525], 4);
更新：更简单的方法......
var featureLayer = L.mapbox.featureLayer({
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {
title: location.title,
image: location.image,
},
geometry: {
type: 'Point',
coordinates: [0, 0]
}
}]
})
.loadURL('http://localhost:3000/locations.json')
.addTo(map);
featureLayer.eachLayer(function(layer) {
// here you call `bindPopup` with a string of HTML you create - the feature
// properties declared above are available under `layer.feature.properties`
var content = '<h1>size: ' + location.title + '<\/h1>' +
'<img src="' + location.image + '">';
layer.bindPopup(content);
});
答案 0 :(得分：0)
对我来说正确的代码是......我必须在AJAX调用中包装我想要的所有内容。
<script type="text/javascript">
function load(geojson) {
// Fetch just the contents of a .geojson file from ... by passing
// `......` to the Accept header
// As with any other AJAX request, this technique is subject to the Same Origin Policy:
// http://en.wikipedia.org/wiki/Same_origin_policy the server delivering the request should support CORS.
$.ajax({
headers: {
'Accept': 'localhost'
},
dataType: 'json',
url: '/locations.json',
success: function (geojson) {
// setting URL for json call below.
// var url = '/locations.json';
// initializing map, dark theme, and view.
var map = L.mapbox.map('map', 'examples.map-y7l23tes')
.addControl(L.mapbox.geocoderControl('examples.map-y7l23tes'))
.setView([40.7178591652903, -73.985538482666], 12);
// Add custom popups to each using our custom feature properties
map.featureLayer.on('layeradd', function (e) {
var marker = e.layer,
feature = marker.feature;
// Create custom popup content
var popupContent = '<div class="popup">' + '<img src="' + feature.properties.image.image.url + '">' +
'<p style="font-size:94%">' + feature.properties.user_id + ' posted: ' +
'<p>' + feature.properties.title + '</p>' +
'<p><span class="timeago" title="' + feature.properties.created_at + '"></span></p>' +
'<% if can? :update, @location %><p><a href="/locations/' + feature.properties.name + '/edit">Edit</a> <% end %>' +
'<% if can? :destroy, @location %> | <%= link_to "Destroy", @location, method: :delete, data: { confirm: "Are you sure?" } %><% end %>';
// http://leafletjs.com/reference.html#popup
return marker.bindPopup(popupContent, {
closeButton: false,
minWidth: 320
});
});
// Iterate through each feature layer item, build a
// marker menu item and enable a click event that pans to + opens
// a marker that's associated to the marker item.
map.featureLayer.eachLayer(function (marker) {
var link = info.appendChild(document.createElement('a'));
link.className = 'item';
link.href = '#';
// Populate content from each markers object.
link.innerHTML = '<img src="' + marker.feature.properties.image.image.url + '" style="width:50px; height:auto;">' + marker.feature.properties.title +
'<br /><small>' + marker.feature.properties.user_id + '</small>';
link.onclick = function () {
if (/active/.test(this.className)) {
this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
} else {
var siblings = info.getElementsByTagName('a');
for (var i = 0; i < siblings.length; i++) {
siblings[i].className = siblings[i].className
.replace(/active/, '').replace(/\s\s*$/, '');
};
this.className += ' active';
// When a menu item is clicked, animate the map to center
// its associated marker and open its popup.
map.panTo(marker.getLatLng());
marker.openPopup();
}
return false;
};
});
}
});
}
$(load);
</script>