web前端 H5 百度地图API 案列 <连续获取十个地址并显示位置信息>

最新推荐文章于 2024-06-15 13:51:57 发布

cdShow小太阳

最新推荐文章于 2024-06-15 13:51:57 发布

阅读量3.9k

点赞数

分类专栏： h5 百度PAI 文章标签： web前端百度地图 api 收集地址信息经纬度转换文字地址信

本文链接：https://blog.csdn.net/cdx1170776994/article/details/76691997

版权

h5 百度PAI 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

思路：
1 先右键开启可以收集的功能
2 双击地图添加经纬度到数组
3 添加到10个关闭收集的功能
4 地址收集完成后再地图上显示这是个地标（图标）
5 创建一个信息窗口的对象
6 单击图标显示位置信息

步骤
1在html中先设置格式和引入百度地图API文件、js文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--引入百度API文件-->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AprPCc8Vizizbwc8qKmxk8D13Yl9cTKs"></script>
        <!--设置样式.div的大小要与可视页面一样大 这样就可以把地图显示在全部页面上面了-->
        <style type="text/css">
            *{margin: 0;padding: 0;}
            html,body,#map{width: 100%;height: 100%;}
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <!--引入js文件  注意百度API文件要在js文件前面-->
    <script type="text/javascript" src="js/new_file.js"></script>
</html>

2新建js文件
代码思路解析：
首先给一个(function(){})()自调用函数，函数会自行调用。自调用函数函数内部氛围三块：1是引入地图并初始化，让地图显示在也页面上面。2是根据要实现的效果给出方法，利用addEventListener（）先给定一个右击事件给顶一个方法listenr；listenr方法就是一个双击事件，这个双击事件的方法是或获取双击时的经纬度，把获取到的信息存放在在一个数组里面，当双击满十次后双击事件停止，然后再控制台显示地址信息，在地图上一图标的形式显示双击过的十个地址。3创建一个可视窗口对象addMarkerToMap（），当点击地址图标的时候，可是窗口出现，并显示地址坐标的文字地址信息。

(function () {
    var map = new BMap.Map("map");
    function takePoints(done) {
        // Promise里面的  执行或者拒绝的方法（Promise(function (done，reject) {}） 只能执行一次  (有可能 把Promise里面传入的参数 移除)
        // 什么时候 不能使用Promise？
        //需要多次执行某个回调的时候 不能使用Promise 因为只能执行一次 -> 就可以使用callback    
            var points = [];        //经纬度数组     
            var isActionDblclick = false;  //是否触发过双击
            function listenr() {               
                if (isActionDblclick){   // 如果双击过 就不再 添加 双击事件
                    return;
                }
            //    双击地图 添加经纬度到数组
            //    添加到10个
            //    添加到10个 关闭收集的功能               
                isActionDblclick = true;          //标识为双击过的      
                function takeStart(event) {   //具体收集坐标点的方法
                    console.log(event);                
                    points.push(event.point);    //    添加经纬度到数组           
                    if (points.length>=10){     //    添加到10个 关闭收集的功能
                        console.log(points);
                        done(points);     //把收集好的坐标点 给调用的位置              
                        isActionDblclick = false;     //    关闭收集的功能
                        map.removeEventListener("dblclick",takeStart);
                        points = [];
                    }
                }
                map.addEventListener("dblclick",takeStart);  
            }
            map.addEventListener("rightclick",listenr);  //首先是一个右击事件  
    }   
    function addMarkerToMap(point) {    //创建一个信息窗口的对象   
        var marker = new BMap.Marker(point);       //声明一个图标 
        map.addOverlay(marker);         //把图标放到地图上面
        marker.addEventListener("click",function () {       //给图标设定一个监听事件  单击击触发
           new BMap.Geocoder().getLocation(point,function (result) {  //获取用户的地址解析。 Geocoder().getLocation()把经纬度转换为文字信息
               console.log(result.address); 
               var infoWindow = new BMap.InfoWindow(result.address); //声明一个变量等于地址信息 
                marker.openInfoWindow(infoWindow); // 在点击图标的时候 
           });
        });
    }
    function init() {
        map.centerAndZoom("北京");
        map.disableDoubleClickZoom();
        takePoints(function (result) {        
            result.forEach(function (point) {  // result -> 他是传过来的points数组-> 盛放的是坐标
                addMarkerToMap(point);
            })
        });
    }
    init();
})();

注意：
1、数组points要放在函数外面
2、利用变量isActionDblclick值true和false 和if判断来停止双击事件

cdShow小太阳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端 H5 百度地图API 案列 <连续获取十个地址并显示位置信息>

思路： 1 先右键开启可以收集的功能 2 双击地图添加经纬度到数组 3 添加到10个关闭收集的功能 4 地址收集完成后再地图上显示这是个地标（图标） 5 创建一个信息窗口的对象 6 单击图标显示位置信息步骤 1在html中先设置格式和引入百度地图API文件、js文件<!DOCTYPE html><html> <head> <meta char
复制链接

扫一扫