Question

我正在编写一个应用程序，我正在尝试使用Leaflet.js添加自定义标记。到目前为止，代码已成功运行，并且已成功将自定义标记添加到地图中，但地图上也存在默认标记。

<div ng-repeat="questionData in questionDatas">
    <h4 ng-bind="questionData.question"></h4>
    <div ng-repeat="choice in questionData.choices">
        <div class="choice"><input  ng-bind="choice" type="radio" ng-value="option" name="option"><label ng-bind="choice"></label></div>
    </div>
    <button ng-click="nextQuestion">Next</button>
</div>

我如何解决这个问题。非常感谢任何帮助。This is what the maps look like,The blue markers are the default,the red markers are the custom markers

任何帮助都将受到高度赞赏，在此先感谢。

Answer 1

因为这个功能

var cordinates = L.geoJSON(geojson).addTo(mymap);

将添加您的坐标并使用默认标记图标，如果您想修改默认标记，您应该在该函数中定义回调，如下所示

my_json = L.geoJson(geojson, {
    pointToLayer: function (feature, latlng) {
        var smallIcon = new L.Icon({
            iconSize: [27, 27],
            iconAnchor: [13, 27],
            popupAnchor: [1, -24],
            iconUrl: 'icone/chapel-2.png'
        });
        return L.marker(latlng, {icon: smallIcon});
    }
});

在你的情况下，标记绘制两次，因为你从第一次注入GeoJson渲染它addTo(mymap)两次。第二，当您定义图标并将其添加到地图时

参考：

使用Leaflet.js创建自定义标记会在地图上添加多个标记

1 个答案: