如何在Mapbox中更改標記圖像？

Question

我是新來的地圖箱。我在mapbox地圖的標記圖像變化中遇到麻煩。 我從https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/得到的代碼我無法更改標記圖像。

這裏是我的代碼：

var geojson = { 
"type": "FeatureCollection", 
"features": [ 
    { 
     "type": "Feature", 
     "properties": { 
      "message": "IN", 
      "iconSize": [30, 30] 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates":<?php echo $in; ?> 
     } 
    }, 
    { 
     "type": "Feature", 
     "properties": { 
      "message": "Check IN", 
      "iconSize": [30, 30] 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates":<?php echo $c; ?> 
     } 
    }, 
    { 
     "type": "Feature", 
     "properties": { 
      "message": "OUT", 
      "iconSize": [30, 30] 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates":<?php echo $o; ?> 
     } 
    } 
    ] 
}; 

geojson.features.forEach(function(marker) { 

    var el = document.createElement('div'); 
    el.className = 'marker'; 
    el.style.backgroundImage = 'url(images/check_in.jpg)'; 
    el.style.width = marker.properties.iconSize[0] + 'px'; 
    el.style.height = marker.properties.iconSize[1] + 'px'; 

    el.addEventListener('click', function() { 
     window.alert(marker.properties.message); 
    }); 

    new mapboxgl.Marker(el, {offset: [-marker.properties.iconSize[0]/2, -marker.properties.iconSize[1]/2]}) 
     .setLngLat(marker.geometry.coordinates) 
     .addTo(map); 
}); 

Answer 1

此，如果從他們的網站：

geojson.features.forEach(function(marker) { 
    // create a DOM element for the marker 
    var el = document.createElement('div'); 
    el.className = 'marker'; 
    el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)'; 
    el.style.width = marker.properties.iconSize[0] + 'px'; 
    el.style.height = marker.properties.iconSize[1] + 'px'; 

    el.addEventListener('click', function() { 
     window.alert(marker.properties.message); 
    }); 

    // add marker to map 
    new mapboxgl.Marker(el, {offset: [-marker.properties.iconSize[0]/2, -marker.properties.iconSize[1]/2]}) 
     .setLngLat(marker.geometry.coordinates) 
     .addTo(map); 
}); 

我覺得你在這部分遺漏+ marker.properties.iconSize.join('/') + '/)';：el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';

Answer 2

訪問此頁面瞭解詳情https://www.mapbox.com/help/markers/

var geojson = { 
"type": "FeatureCollection", 
"features": [ 
    { 
     "type": "Feature", 
     "properties": { 
      "message": "IN", 
      "iconSize": [30, 30] 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates":<?php echo $in; ?> 
     } 
    }, 
    { 
     "type": "Feature", 
     "properties": { 
      "message": "Check IN", 
      "iconSize": [30, 30] 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates":<?php echo $c; ?> 
     } 
    }, 
    { 
     "type": "Feature", 
     "properties": { 
      "message": "OUT", 
      "iconSize": [30, 30] 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates":<?php echo $o; ?> 
     } 
    } 
], 

"properties": { 
     "icon": { 
     "iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png", 
     "iconSize": [50, 50], // size of the icon 
     "iconAnchor": [25, 25], // point of the icon which will correspond to marker's location 
     "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor 
     "className": "dot" 
     } 
    } 
};