码迷,mamicode.com
首页 > 其他好文 > 详细

百度地图 layer弹出地图 获取坐标

时间:2017-06-16 12:04:37      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:blog   etc   点击   click   text   加载   splay   local   cti   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer弹出百度地图</title>
    <script src="jquery.min.js"></script>
    <script src="layer/layer.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=587da1dc855ff1c6"></script><!--百度地图key要自己注册,或者用1.4以下的版本(不需要key)-->
</head> <body> <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> <script> $(document).ready(function(){ $("#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(){ } }); }); }); </script> </body> </html>

 

百度地图 layer弹出地图 获取坐标

标签:blog   etc   点击   click   text   加载   splay   local   cti   

原文地址:http://www.cnblogs.com/zonglonglong/p/7026755.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!