web前端 H5 百度地图API 案列

思路:
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判断来停止双击事件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章