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

Question

只是一个简短的问题，是否有人用 Maki 图标替换了 Mapbox 默认标记。我只看过将 Maki 图标用于点 tilesets/layers 的示例，但我想将其用于非 tileset 功能，特别是替换地理编码后添加的标记，位于刚刚地理编码的地址位置。

或者，尝试找到类似于下面的 Google 地图符号的内容。任何建议表示赞赏。

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

Answer 1

我想这个样本就是你要找的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);

Answer 2

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

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

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

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

Add Maki Icon instead of Mapbox Geocoder Marker

mapbox

mapbox-gl

mapbox-gl-js

mapbox-marker