<!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弹出地图 获取坐标的更多相关文章

  1. layer弹出层 获取index

    function closelayer(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index ...

  2. ArcGIS API for Silverlight 当DataGrid选中项时，地图聚焦弹出窗口，并可以播放音频文件

    原文:ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件 先看效果图,然后上代码: <UserControl x:Class= ...

  3. layer弹出信息框API

    首先向大家推荐layer,在这里也非常感谢贤心的贡献,非常不错的信息框及弹出层解决方案,为一些项目的前端开发提高了很大的效率,希望layer 越办越好! 下面是API,呵呵,官方抄袭过来的,为了自己看 ...

  4. layer弹出层详解

    前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...

  5. Layer弹出层销毁问题

    Layer弹出层销毁问题 最近开发时有个问题记录一下 点击按钮显示相应的图表信息,当时自己点感觉没问题,谁知到测试手里多次点击就会有后续打开的窗口无法渲染问题,看了半天才发现是调用layer.clos ...

  6. layer 弹出层 回调函数调用 弹出层页面 函数

    1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...

  7. layer弹出层不居中解决方案

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  8. layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  9. layer弹出层

    最近因为项目要求做了一个layer弹出层demo,先看效果图 好了,现在开始上代码 index.jsp <%@ page language="java" import=&qu ...

随机推荐

  1. 小米开源文件管理器MiCodeFileExplorer-源码研究(2)-2个单实例工具类

    从本篇开始,讲解net.micode.fileexplorer.util工具包中的类.这个包下的类,功能也比较单一和独立.很多代码的思想和实现,可以用于JavaWeb和Android等多种环境中. 一 ...

  2. 洛谷 P2437 蜜蜂路线

    P2437 蜜蜂路线 题目描述 一只蜜蜂在下图所示的数字蜂房上爬动,已知它只能从标号小的蜂房爬到标号大的相邻蜂房,现在问你:蜜蜂从蜂房M开始爬到蜂房N,M<N,有多少种爬行路线? 输入输出格式 ...

  3. 18.Node.js 事件循环

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node ...

  4. java根据url获取完整域名

    private String getDomain(String destination){ if(destination==null||destination.trim().equals(" ...

  5. qt多线程

    为什么要用多线程? 传统的图形用户界面应用程序都只有一个执行线程,并且一次只执行一个操作.如果用户从用户界面中调用一个比较耗时的操作,当该操作正在执行时,用户界面通常会冻结而不再响应.这个问题可以用事 ...

  6. django-rest-framework框架 第四篇 认证Authentication

    认证Authentication 什么是身份认证 身份验证是将传入请求与一组标识凭据(例如请求来自的用户或与其签名的令牌)关联的机制. 视图的最开始处运行身份验证 在权限和限制检查发生之前,以及在允许 ...

  7. 洛谷 P1334 瑞瑞的木板

    P1334 瑞瑞的木板 题目描述 瑞瑞想要亲自修复在他的一个小牧场周围的围栏.他测量栅栏并发现他需要N(1≤N≤20,000)根木板,每根的长度为整数Li(1≤Li≤50,000).于是,他神奇地买了 ...

  8. Linux 网卡驱动学习（九）（层二转发）

    1.mac 地址表的自学习过程 port1上的A计算机要与port2上的B计算机通信时,A发到交换机上,交换机收到信息后,交换机先记录发port1所相应的a的mac地址并记录在自己的mac表中,然后再 ...

  9. setting-在设置中添加新的选项

    如下图的“通知栏调出方式” 具体实现如下 1.在 res/xml/settings_headers.xml 文件中添加如下内容 <preference-headers xmlns:android ...

  10. java的23中设计模式

    一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接 ...