layer弹出百度地图,选取经纬度至文本框中

关键在于open后再调用百度的方法

<div id="maplocation" style="width:500px;height:500px;display: none;"></div>
    经度<input type="text" id="lng">
    纬度<input type="text" id="lat">
    <button id="dian">点击我</button>

 

   $(function(){
layui.use('layer', function(){
  var layer = layui.layer;
  })
            $("#dian").click(function(){
                 layer.open({
                     type:1,
                     area:"500px",
                     title:"测试",
                     content:$('#maplocation'),
                     success:function(){
                         var map = new BMap.Map("maplocation"); // 创建地图实例 
                        map.enableScrollWheelZoom();   //启用滚轮放大缩小,默认禁用
                        var point = new BMap.Point(116.404, 39.915); // 创建点坐标 
                        map.centerAndZoom(point, 12);
                        function myFun(result){
                            var cityName = result.name;
                            map.setCenter(cityName);
                            //alert("当前定位城市:"+cityName);
                        }
                        var myCity = new BMap.LocalCity();
                        myCity.get(myFun);
                        var marker = new BMap.Marker(map.getCenter());  // 创建标注
                        map.addOverlay(marker);               // 将标注添加到地图中
                        marker.enableDragging();                //可拖拽
                        //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        map.addEventListener("click",function(e){  
                             // alert(e.point.lng+","+e.point.lat);// 单击地图获取坐标点;
                             //$(‘#lng‘).val(e.point.lng);
                             //$(‘#lat‘).val(e.point.lat);
                             //map.panTo(new BMap.Point(e.point.lng,e.point.lat));// map.panTo方法,把点击的点设置为地图中心点  
                        }); 
                        marker.addEventListener("dragend", function(e){                    //拖拽标注获取标注坐标
                             //alert("当前位置:" + e.point.lng + ", " + e.point.lat);           //可拖拽的标注 
                             $("#lng").val(e.point.lng);
                            $("#lat").val(e.point.lat);
                        })
                        //加载完成之后,改变标注点坐标,使之和当前定位的城市基本相符
                        map.addEventListener("tilesloaded",function(){
                            var newpoint = map.getCenter();
                            marker.setPosition(newpoint);
                        });
                     },
                     cancel:function(){
                     }
                 });
            });
        

 

})

 

转载于:https://www.cnblogs.com/SunSong/p/9909947.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值