可以通过以下步骤实现:
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: zoomLevel
});
var marker = new mapboxgl.Marker()
.setLngLat([lng, lat])
.addTo(map);
var map1 = new mapboxgl.Map({
container: 'map1',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng1, lat1],
zoom: zoomLevel1
});
var marker1 = new mapboxgl.Marker()
.setLngLat([lng1, lat1])
.addTo(map1);
var map2 = new mapboxgl.Map({
container: 'map2',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng2, lat2],
zoom: zoomLevel2
});
var marker2 = new mapboxgl.Marker()
.setLngLat([lng2, lat2])
.addTo(map2);
在上述代码中,'map1'和'map2'是用于容纳地图的HTML元素的ID,可以根据需要自定义。
这样就可以通过单个地图实例创建多个显示不同标记的mapbox-gl地图。每个地图实例可以具有不同的中心点、缩放级别和标记位置,从而实现多个地图的定制化显示。
腾讯云相关产品和产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云