Javascript 将自定义标记添加到地图框地图
我在项目中使用mapbox 我正在使用mapbox.js 用这样的自定义标记制作我的地图Javascript 将自定义标记添加到地图框地图,javascript,jquery,mapbox,mapbox-gl-js,Javascript,Jquery,Mapbox,Mapbox Gl Js,我在项目中使用mapbox 我正在使用mapbox.js 用这样的自定义标记制作我的地图 $(function() { const token = '*********'; let myLatlng = L.latLng(<%= @hotel.lat %>,<%= @hotel.lng %>); L.mapbox.accessToken = token; let map = L.mapbox.map('map-canvas', 'mapbox.stre
$(function() {
const token = '*********';
let myLatlng = L.latLng(<%= @hotel.lat %>,<%= @hotel.lng %>);
L.mapbox.accessToken = token;
let map = L.mapbox.map('map-canvas', 'mapbox.streets')
.setView(myLatlng, 14);
let marker = new L.marker(myLatlng,{
icon: L.icon({
iconUrl: '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D'
})
}).addTo(map);
});
icon: L.icon({
iconUrl: '//chart.googleapis.com/chart?chst=d_map_pin_icon&chld=home|EBCB2D'
})
我想知道MapBox GL JS是否有像rhis这样的速记方法来更改它?要详细说明给出的两个注释,有两种不同的方法可以将自定义图像添加到地图中: 使用符号层 地图中存在一个符号层,可用于可视化数据源 首先,使用
loadImage()
获取图像URL:
map.loadImage('https://example.com/image.png', function(error, image) {
if (error) throw error;
然后,使用addImage()
将获取的图像转换为图标,以便在地图中使用:
map.addImage('pin', image);
最后,在图层上使用该图标:
map.addLayer({ id: 'mypin', type: 'symbol', paint: { 'icon-image': 'pin' });
完整示例:
使用标记
或者,您可以使用标记。它存在于地图上方,不与地图中的数据交互
首先,为图像创建DOM元素:
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://example.com/icon.png)';
el.style.width = '20px';
el.style.height = '20px';
接下来,基于此元素创建标记对象,并将其添加到地图:
new mapboxgl.Marker(el)
.setLngLat(mylatlng)
.addTo(map);
完整示例:您可以使用
addImage
:或者您可以通过创建img元素来使用GL JS标记。