使用 Markers 添加自定义图标

原创已于 2022-04-20 14:03:23 修改 · 626 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

收录于

于 2022-04-18 16:59:53 首次发布

MapBox 专栏收录该内容

3 篇文章

订阅专栏

使用 Markers 添加自定义图标

var map = window.map = new mapboxgl.Map({
    container: 'map',
    projection:{name:"naturalEarth"},
    zoom: 2,
    center: [121, 31],
    style: 'mapbox://styles/mapbox/streets-v11',
    // interactive: false
});
// var marker = new mapboxgl.Marker();
// marker.setLngLat([121,31]);
// marker.addTo(map);
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = "url(http://placekitten.com/g/60/60)";
el.style.height='100px';
el.style.width='100px';
new mapboxgl.Marker(el)
.setLngLat([121,31])
.addTo(map);