添加Maki图标而不是Mapbox Geocoder标记

问题描述

一个简单的问题，是否有人用Maki图标替换了Mapbox默认标记。我只看过将Maki图标用于点图块/图层的示例，但我想将其用于非图块功能，特别是替换在地理编码后在刚刚进行地理编码的地址处添加的标记。>

或者，尝试查找与以下Google Maps符号类似的内容。任何建议表示赞赏。

var pinImage =  {
            path: google.maps.SymbolPath.CIRCLE,fillColor: '#ff4b00',fillOpacity: .9,scale: 5,strokeColor: '#CDDC39',strokeWeight: 0,strokeOpacity: .5
        }

解决方法

我认为这个样本就是您要寻找的Use a custom render function with a geocoder

它允许您添加包括图标...的自定义渲染功能。

var geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,types: 'poi',// see https://docs.mapbox.com/api/search/#geocoding-response-object for information about the schema of each response feature
render: function(item) {
// extract the item's maki icon or use a default
var maki = item.properties.maki || 'marker';
return (
"<div class='geocoder-dropdown-item'><img class='geocoder-dropdown-icon' src='https://unpkg.com/@mapbox/maki@6.1.0/icons/" +
maki +
"-15.svg'><span class='geocoder-dropdown-text'>" +
item.text +
'</span></div>'
);
},mapboxgl: mapboxgl
});
map.addControl(geocoder);

,

MapboxGeocoder控件具有一个marker选项https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#parameters，该选项可在您选择结果时控制放置在地图上的标记。

https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/有一个示例，用于创建带有自定义图标的标记。

因此，您可以创建一个包含Maki中的SVG或PNG图标的HTML元素，并将其用作传递给MapboxGeocoder控件的自定义标记中的元素。