mapbox 地图交互

最新推荐文章于 2024-05-17 17:02:30 发布

炉火纯青-旺

最新推荐文章于 2024-05-17 17:02:30 发布

阅读量1.4k

点赞数

分类专栏： mapbox 文章标签： mapbox

本文链接：https://blog.csdn.net/qq_34870529/article/details/94142469

版权

mapbox 专栏收录该内容

22 篇文章 5 订阅

订阅专栏

<!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>

效果展示：

炉火纯青-旺

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
mapbox 地图交互

<!DOCTYPE html><html><head> <meta charset='utf-8' /> <title>mapbox 地图交互</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,use...
复制链接

扫一扫