小白入门---百度地图JavaScript API 类使用升级

Marker&InfoWindow

1找10个经纬度,用大头针的方式展示在地图上并且把经纬度和发布的信息结合,使用详细窗口展示

(function(){
    var map=new BMap.Map("map");
    /*先右键开启可以收集的功能
     * 双击地图 添加经纬度到数组
     * 添加到10个,关闭收集功能
     */
    function takePoints(done){
//      return new Promise(function(done){
            var points=[];//存储经纬度的数组
            var isActionDblclick=false;//判断是否触发过双击
            function listener(){/*双击地图 添加经纬度到数组,添加到10个,关闭收集功能*/ 
                if(isActionDblclick){
                    return;
                }
                isActionDblclick=true;
                function takeStart(event){//收集坐标点
                    console.log(event);                 
                    points.push(event.point);//添加经纬度到数组 
                    console.log(points);
                    if(points.length>=10){//添加到10个关闭
                        done(points);//把收集好的坐标点给调用的位置,Promise里面执行或者拒绝的方法只能执行一次,执行完就会移除函数(有可能把Promise里面的参数移除了。所以在需要多次执行某个回调的时候就不能使用Promise
                        isActionDblclick=false;
                        map.removeEventListener("dblclick",takeStart);
                        points=[];
                    }
                }
                map.addEventListener("dblclick",takeStart);
            }
            map.addEventListener("rightclick",listener);

//      });
    }
    function addMarkerToMap(point){
        var marker=new BMap.Marker(point);
        map.addOverlay(marker);     
        marker.addEventListener("click",function(){
            new BMap.Geocoder().getLocation(point,function(result){
                console.log(result.address);
                var infowindow=new BMap.InfoWindow(result.address,{width:100,height:100,title:地址信息});
                map.openInfoWindow(infowindow,point);
            });
        });
    }
    function init(){
        map.centerAndZoom("北京");
        map.disableDoubleClickZoom();
//      takePoints().then(function(result){//result代表传过来的数组
        takePoints(function(result){
            result.forEach(function(point){
                addMarkerToMap(point);
            });
        });
    }
    init();
    var coder=new BMap.Geocoder();
    coder.getLocation(new BMap.Point(116.401481,39.914776),function(result){
        console.log(result);
    });//对指定的坐标点进行反地址解析。
    coder.getPoint("北京大学",function(result){
        console.log(result);
    },"北京")

})();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值