<!DOCTYPE html>
<html>
<head><meta charset='utf-8' /><title>mapbox 地图交互</title><meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /><script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script><link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' /><style>body { margin:0; padding:0; }#map { position:absolute; top:0; bottom:0; width:100%; }</style>
</head>
<body><div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbndhbmdzaGFuIiwiYSI6ImNqaGp3djlxMTJwb2szZG50ZzBjbDQ1cWIifQ.Gp_2XohZMGO-a6e_treCQQ';
var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/light-v10',zoom: 12,center: [91.13, 29.65]
});
map.scrollZoom.enable(); // 鼠标滚轮操作地图 禁止 disable
map.boxZoom.enable(); // shoft + 鼠标放大地图
map.dragRotate.enable(); // 鼠标左键放大地图
map.dragPan.enable(); // 鼠标拖动地图
map.keyboard.enable(); // 键盘操作地图
map.doubleClickZoom.enable(); // 鼠标双击放大地图
map.touchZoomRotate.enable(); // 电脑触摸屏操作地图map.addControl(new mapboxgl.NavigationControl()); // 添加地图缩放控件
map.addControl(new mapboxgl.FullscreenControl()); // 添加全屏控件
map.addControl(new mapboxgl.GeolocateControl({ // 定位控件positionOptions: {enableHighAccuracy: true},trackUserLocation: true
}));
var scale = new mapboxgl.ScaleControl({ // 添加比例尺控件maxWidth: 80,unit: 'imperial'
});
map.addControl(scale);scale.setUnit('metric'); // 设置度量标准var marker = new mapboxgl.Marker() // 添加marker点.setLngLat([91.13, 29.65]).addTo(map);// 添加pop框
var markerHeight = 50, markerRadius = 10, linearOffset = 25;
var popupOffsets = {'top': [0, 0],'top-left': [0,0],'top-right': [0,0],'bottom': [0, -markerHeight],'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],'left': [markerRadius, (markerHeight - markerRadius) * -1],'right': [-markerRadius, (markerHeight - markerRadius) * -1]};
var popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'}).setLngLat(e.lngLat).setHTML("<h1>Hello World!</h1>").setMaxWidth("300px").addTo(map);
</script></body>
</html>效果展示：
