javascript - 错误的图像 url 将图像添加到 mapbox 弹出窗口

Question

今天，我试图找到一种将图像属性插入mapbox弹出窗口的方法。因此，在网站上搜索，我找到了一种将此属性添加到弹出窗口中的方法，但由于未知原因，结果是：

http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg/

而不是http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg.

因此/，图像 url 的末尾是给出未找到图像的原因。你知道为什么吗？

<script>
mapboxgl.accessToken = &#39;........&#39;;

var map = new mapboxgl.Map({
container: &#39;map&#39;,
style: &#39;mapbox://styles/mapbox/streets-v11&#39;,
center: [25.147437, 37.548452],
zoom: 9.5
});

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());


map.on(&#39;load&#39;, function () {

var location = document.getElementById(&quot;1234&quot;).innerText;
var locations= eval(&#39;[&#39;+location+&#39;];&#39;);
// Add a layer showing the places.
map.addLayer({
&quot;id&quot;: &quot;places&quot;,
&quot;type&quot;: &quot;symbol&quot;,
&quot;source&quot;: {&quot;type&quot;: &quot;geojson&quot;,&quot;data&quot;: {&quot;type&quot;: &quot;FeatureCollection&quot;,&quot;features&quot;: locations}},&quot;layout&quot;: {&quot;icon-image&quot;: &quot;{icon}-15&quot;,&quot;icon-allow-overlap&quot;: true}});

// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on(&#39;click&#39;, &#39;places&#39;, function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();

// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) &gt; 180) {
coordinates[0] += e.lngLat.lng &gt; coordinates[0] ? 360 : -360;
}

new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML('<b>'+ e.features[0].properties.title + '</b>' + e.features[0].properties.description + '<p><img src='+e.features[0].properties.image+'></img></p>')
.addTo(map);

});

// Change the cursor to a pointer when the mouse is over the places layer.
map.on(&#39;mouseenter&#39;, &#39;places&#39;, function () {
map.getCanvas().style.cursor = &#39;pointer&#39;;
});

// Change it back to a pointer when it leaves.
map.on(&#39;mouseleave&#39;, &#39;places&#39;, function () {
map.getCanvas().style.cursor = &#39;&#39;;
});
});

</script>

标签： javascriptmapbox

Answer 1

好吧，我不得不改变

<img src='+e.features[0].properties.image+'></img>

使用以下代码：

<img src="'+e.features[0].properties.image+'"/>