[Mapbox GL]获取鼠标位置的坐标

来源：互联网发布：饥荒 linux 汉化编辑：程序博客网时间：2024/05/22 14:27

展示鼠标悬停位置的像素和经纬度坐标

<!DOCTYPE html><html><head>    <meta charset='utf-8' />    <title></title>    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />    <style>        body { margin:0; padding:0; }        #map { position:absolute; top:0; bottom:0; width:100%; }    </style></head><body><style type='text/css'>    #info {        display: block;        position: relative;        margin: 0px auto;        width: 50%;        padding: 10px;        border: none;        border-radius: 3px;        font-size: 12px;        text-align: center;        color: #222;        background: #fff;    }</style><div id='map'></div><pre id='info'></pre><script>mapboxgl.accessToken = '<your access token here>';var map = new mapboxgl.Map({    container: 'map', // container id    style: 'mapbox://styles/mapbox/streets-v9',    center: [-74.50, 40], // starting position    zoom: 9 // starting zoom});map.on('mousemove', function (e) {    document.getElementById('info').innerHTML =       /* innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML  */        // e.point is the x, y coordinates of the mousemove event relative        // to the top-left corner of the map        JSON.stringify(e.point) + '<br />' +            // e.lngLat is the longitude, latitude geographical position of the event        JSON.stringify(e.lngLat);  /* JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串 */});</script></body></html>

0 0