Question

我是mapbox的新手。我在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"
      }
    }
};

如何在Mapbox中更改标记图像？

2 个答案: