<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

        .button-full{

            position: fixed;

            bottom: 0;

            left: 0;

            z-index: 999;

            height: 50px;

            width: 100%;

            line-height: 50px;

            font-size: 16px;

            text-align: center;

            color: #fff;

            background: #333;

            text-decoration: none;

        }

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ***Your ak"></script>

    <title>地图展示</title>

</head>

<body>

    <div id="allmap"></div>

    <a id="chosedBtn" class=" button-full">选择这个地址</a>

</body>

</html>

javascirpt

<script type="text/javascript">

    //创建默认初始化Map实例

    (function(){

        mapObj = {

            com: {

                map : new BMap.Map("allmap"),

                infoWindow :  new BMap.InfoWindow("正在载入..", {offset : new BMap.Size(20, -60)}),

                icon: new BMap.Icon("__IMG__/locate.png", new BMap.Size(60, 60)),

                iconOffsetSize: new BMap.Size(0, -30),

                chosedAddr: ""

            },

            init: function(){

                var _this = this;

                _this.default();

                _this.initLocation().then(function(result){

                    //清除掉默认的markerDefault

                    _this.com.map.clearOverlays()

                    var marker = result.mk;

                    var point = result.pt;

                    //取得当前位置的名字

                    _this.getAddrAccordingPoint(point).then(function(res){

                        _this.changeInfoWindowContent(res)

                        //打开信息窗体

                        _this.com.map.openInfoWindow(_this.com.infoWindow, point);

                    }); 

                    //绑定拖动结束事件，获取经纬度

                    marker.addEventListener("dragend", function(){

                        var curPoint = marker.getPosition();

                        console.log(curPoint)

                        //取得拖动后当前位置的名字

                        _this.getAddrAccordingPoint(curPoint).then(function(res){

                            _this.changeInfoWindowContent(res)

                            //打开信息窗体

                            _this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);

                        });

                    });

                    marker.addEventListener("click", function(){

                        var curPoint = marker.getPosition();

                        _this.getAddrAccordingPoint(curPoint).then(function(res){

                            _this.changeInfoWindowContent(res)

                            //打开信息窗体

                            _this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);

                        })

                    });

                })

            },

            //默认打开地图的初始状态设置

            default: function(){

                var _this = this;

                var point = new BMap.Point(114.062048, 22.54579);

                // 设置初始化地图,设置中心点坐标和地图级别

                _this.com.map.centerAndZoom(point, 12);  

                //设置初次打开时，markerDefault，定位初始完毕会被销毁

                var markerDefault = new BMap.Marker(point);

                _this.com.map.addOverlay(markerDefault);

                markerDefault.setIcon(_this.com.icon);

                //设置信息窗体宽度

                _this.com.infoWindow.setWidth(220);

            },

            //獲取定位初始化地圖

            initLocation: function (){

                var _this = this;

                return new Promise(function(resolve, reject){

                    new BMap.Geolocation().getCurrentPosition(function(r){

                        var lat = r.latitude;

                        var long = r.longitude;

                        var point = new BMap.Point(long, lat)

                        var marker = new BMap.Marker(point);

                        marker.setOffset(_this.com.iconOffsetSize)

                        marker.setIcon(_this.com.icon);

                        marker.setAnimation(BMAP_ANIMATION_BOUNCE);

                        var initObj = {

                            pt: point,

                            mk: marker

                        } 

                        // 将标注添加到地图中

                        _this.com.map.addOverlay(marker); 

                        //允许拖动

                        marker.enableDragging();

                        //不允许被clearOverlays方法清除

                        marker.disableMassClear();

                        //地图指向当前的点（平移动画）

                        _this.com.map.panTo(point);

                        // 初始化地图,设置中心点坐标和地图级别

                        _this.com.map.centerAndZoom(point, 16);  

                        resolve(initObj);

                    })

                })

            },

            //根据经纬度解析出位置的名称

            getAddrAccordingPoint: function(point){

                var _this = this;

                return new Promise(function(resolve, reject){

                    new BMap.Geocoder().getLocation(point, function(result){

                        if (result){

                            if(!!result.surroundingPois[0]){

                                _this.com.chosedAddr = result.address + " " +result.surroundingPois[0].title;

                            }else{

                                _this.com.chosedAddr = result.address;

                            }

                            resolve(_this.com.chosedAddr)

                        }

                    });

                })

            },

            //添加标注地址信息

            changeInfoWindowContent: function(content){

                var _this = this;

                _this.com.infoWindow.setContent(content);

            }

        }; 

        //开始地图

        mapObj.init();

        document.getElementById('chosedBtn').addEventListener('click', function(){

            location.href = '<{:U("Channel/addChannelFollowLog")}>?address='+mapObj.com.chosedAddr

        },false)    

    })()

</script>

　　

百度地图获取定位，实现拖动marker定位，返回具体的位置名的更多相关文章

  1. C#的百度地图开发(四)前端显示与定位

    原文:C#的百度地图开发(四)前端显示与定位 有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码 <%@ Page  ...

  2. 百度地图API 显示区域边界及地名定位

    百度地图API 显示区域边界及地名定位 这个定位一共用了两个方法组成 一个是定位绘制区域边界线,另一个是地名定位 原理: 当用户输入省.市.县.区这种大地名时,我们要定位用户输入的这个位置,并显示轮廓 ...

  3. Xamarin.Android 使用百度地图获取定位信息

    最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...

  4. ionic基于GPS定位并通过百度地图获取定位详细信息

    相信所有的前端攻城狮都会碰到移动端App.里面获取用户定位信息. 那么问题来了,怎么获取用户的定位信息(经纬度)呢. 当然方法有很多,通过百度地图API 以及 高德地图 API都是可以的.但是两个获取 ...

  5. [android] 百度地图开发 (两).所在地的城市定位和城市POI搜索

    一个. 百度地图城市位置和POI搜索知识       上一篇文章"百度地图开发(一)"中讲述了怎样申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述怎样定位城市位置.定 ...

  6. Android Studio下加入百度地图的使用（二）——定位服务

    上一章(http://www.cnblogs.com/jerehedu/p/4891216.html)中我们已经完成了环境的搭建,这一章我们来研究一下如何使用. 第一步:在xml文件中加入以下权限 & ...

  7. 百度地图api之----根据用户ip定位城市

    LocalCity 这个类是利用用户IP地址去百度数据库里查询得到IP所在的城市,用法如下: var objCity = new BMap.LocalCity(); objCity.get(funct ...

  8. IOS百度地图获取所在的城市名称

    笔者的app要实现定位所在省和城市名称,借此总结巩固一下! @interface VenueListVC : BasePageTableViewVC<BMKLocationServiceDele ...

  9. vue 中结合百度地图获取当前城市

    首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...

随机推荐

  1. “朕赐给你，才是你的；朕不给，你不能抢”--custome role在Azure权限管理中的简单实践

    在开始详细讨论技术问题之前,有一些个人观点想发表一下: ---作为一个甲方云平台的掌控着,如果任何事情你都是让partner全部帮你搞定,自己既不审核也不研究,那无论是对于公司还是个人发展来说都是没任 ...

  2. vue教程(二)--过滤器和监视改动功能

    过滤器filter: 1.将数据进行添油加醋的操作. 2.过滤器分两种: 组件内的过滤器(组件内有效). 全局过滤器 组件内:filters:{过滤器名:过滤器函数fn},fn内通过return 返回 ...

  3. 15. Java异常处理

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  4. Linux命令之文件相关

    cd 绝对路径相对路径 --转到对应目录 touch-a --更新访问时间 touch -m --更新修改时间(ls -l只能显示修改时间) touch -t [[cc]yy]mmddhhmm[ss] ...

  5. 【MySQL】Unknown column 'column_name' in 'field list'

    使用 INSERT INTO - SELECT FROM - ON DUPLICATE KEY UPDATE 时遇到了这个问题,百思不得其解

  6. 传输层的TCP和UDP协议

    作者:HerryLo 原文永久链接: https://github.com/AttemptWeb... TCP/IP协议, 你一定常常听到,其中TCP(Transmission Control Pro ...

  7. html以前没有学到的标签

    <q>标签,短文本引用 <blockquote>标签,长文本引用 <address>标签,为网页加入地址信息 <code>标签,插入单行代码 <p ...

  8. 全开源C++ DirectUI 界面库SOUI 3.0更新

    从2019.5.22开始,SOUI版本号更新到2.9.0.2,后面开始准备3.0的开发,历时近3个月,现在3.0的主要工作基本完成. 为了便于大家区别2.x,3.0启用了新的代码仓库:https:// ...

  9. Linux基础管道管理

    一.I/O重定向 标准输入,标准输出,标准错误 file descriptors (FD, 文件描述符或Process I/O channels); 进程使用文件描述符来管理打开的文件 [root@l ...

  10. zookeeper 集群配置

    安装前要先确保配置好 jdk,这里不在讲述 一. 将zookeeper 安装包下载到你想要的目录 下载地址:http://mirrors.hust.edu.cn/apache/zookeeper/ m ...