12.22

最新推荐文章于 2024-09-04 20:18:34 发布

weixin_73723055

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量93

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_73723055/article/details/128411836

版权

本文介绍了如何使用百度地图JavaScript API获取当前位置并显示在地图上，同时展示了拖拽事件的原理和应用，包括dragstart、drag、dragover、drop等事件的处理方法，以及创建信息窗口和规划驾车路线的功能。

摘要由CSDN通过智能技术生成

###
日期：12.22
百度地图
   getCurrentPosition() 方法来获取设备当前位置。
       coords.latitude 以十进制度数表示纬度的双精度值。 |
       coords.longitude 以十进制度数表示经度的双精度值。 |
       coords.accuracy 表示纬度和经度属性精度的双精度值，单位为米。 |
       coords.altitude 表示该位置相对于海平面的高度的双经度值。<br/>如果无法提供数据，则此值可以为空。 |
       coords.altitudeAccuracy 表示高度属性精度的双精度值，单位为米。 |
       coords.heading 表示设备运行方向的双精度值。<br>该值（以度为单位）表示设备离正北方向的距离。0° 表示正北方向，顺时针计算（即东为 90°，西为 270°）。<br>如果速度为 0，此值为 NaN；如果设备无法提供方向信息，则此值为空。 |
       coords.speed 表示设备运行速度的双精度值，单位为米/每秒。 |
       timestamp 获取到位置的时间（时间戳）。
   <div id="map"></div>
   <script>
       // 初始化地图
       function initialize() {
           var point = new BMap.Point(113.839158, 34.729169); // 目标地理位置
           var map = new BMap.Map('map');
           map.centerAndZoom(point, 12);
           map.enableScrollWheelZoom(true); // 启用滚轮缩放

           map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
           map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
           map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件

           var marker = new BMap.Marker(point); // 创建标注
           map.addOverlay(marker); // 将标注添加到地图中
           var opts = {
               width: 240,
               height: 80,
               title: `厚溥IT`
           }

           var infoWindow = new BMap.InfoWindow('河南省郑州市经济技术开发区航海东路中兴新业港51号楼', opts); // 创建信息窗口对象
           marker.addEventListener('click', function() {
               map.openInfoWindow(infoWindow, point); // 打开信息窗口
           })

           var geolocation = new BMap.Geolocation();
           geolocation.enableSDKLocation(); // 开启SDK辅助定位
           geolocation.getCurrentPosition(function(result) {
               if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                   var current = result.point; // 当前地理位置
                   var driving = new BMap.DrivingRoute(map, {
                       renderOptions: {
                           map: map,
                           autoViewport: true
                       }
                   });
                   driving.search(current, point); // 驾车路线规划
               }
           })
       }

       // 加载 JavaScript API
       function loadScript() {
       var script = document.createElement("script");
       script.src = "https://api.map.baidu.com/api?v=2.0&ak=mETWRRt2iKZmAomVO0WhohX32tPGTUtC&callback=initialize";
       document.body.appendChild(script);
       }

       window.onload = loadScript;
   </script>
拖拽事件
   用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的（droppable）元素，
   然后释放鼠标。在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发
   （比如 `drag` 和 `dragover` 事件类型）。
   drag | ondrag | 当拖拽元素或选中的文本时触发。
   drop | ondrop | 当元素或选中的文本在可释放目标上被释放时触发。
   dragenter | ondragenter | 当拖拽元素或选中的文本到一个可释放目标时触发。
   dragover | ondragover | 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。 |
   dragleave | ondragleave | 当拖拽元素或选中的文本离开一个可释放目标时触发。
   dragstart | ondragstart | 当用户开始拖拽一个元素或选中的文本时触发。
   dragend | ondragend | 当拖拽操作结束时触发（比如松开鼠标按键或敲 “Esc” 键）。

   
   ```html
   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>拖拽事件</title>
           <style>
               .box {
                   width: 262px;
                   height: 46px;
                   padding: 15px;
                   border: 2px solid #aaaaaa;
               }
           </style>
       </head>
       <body>
           <div id="div1" class="box" οndrοp="drop(event)" οndragοver="allowDrop(event)">
               <img id="logo" src="img/logo.jpg" draggable="true" οndragstart="drag(event)" width="262" height="46">
           </div>
           <br />
           <div id="div2" class="box" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
           <script>
               function allowDrop(ev) {
                   ev.preventDefault();
               }

               function drag(ev) {
                   ev.dataTransfer.setData("text/plain", ev.target.id);
               }

               function drop(ev) {
                   ev.preventDefault();
                   var id = ev.dataTransfer.getData("text/plain");
                   ev.target.appendChild(document.getElementById(id));
               }
           </script>
       </body>
   </html>

weixin_73723055

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12.22

百度地图 getCurrentPosition() 方法来获取设备当前位置。 coords.latitude 以十进制度数表示纬度的双精度值。 | coords.longitude 以十进制度数表示经度的双精度值。 | coords.accuracy 表示纬度和经度属性精度的双精度值，单位为
复制链接

扫一扫