<!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. [leetcode] 905. Sort Array By Parity [easy]

    原题链接 很水的一道题,就是数组内部交换. 水题就想着减少复杂度嘛,于是学到一种交换写法. class Solution { public: vector<int> sortArrayBy ...

  2. Simple TPU的设计和性能评估

    深度学习飞速发展过程中,人们发现原有的处理器无法满足神经网络这种特定的大量计算,大量的开始针对这一应用进行专用的硬件设计.谷歌的张量处理单元(Tensor Processing Unit,后文简称TP ...

  3. [ PyQt入门教程 ] PyQt5环境搭建和配置

    PyQt入门系列教程主要目的是希望通过该系列课程学习,可以使用PyQt5工具快速实现简单的界面开发,包括界面设计.布局管理以及业务逻辑实现(信号与槽).简单说就是可以使用PyQt5工具快速画一个控件摆 ...

  4. Android的简述2

    android提供了三种菜单类型,分别为options menu,context menu,sub menu. options menu就是通过按home键来显示,context menu需要在vie ...

  5. JAVA从零学习 第一天 邮箱ych1102@163.com QQ382993199

    学习编程  听说读写 寻寻渐进   要准备好长期蒙蒙的状态  延迟3个月后明白 机器语言 二级制 1010  1100 0011 汇编语言 助记词表达程序   机器如果执行就需要编译  汇编语言移植性 ...

  6. java抽奖思路

    现在在做一个有关抽奖的活动,将我自己所做的抽奖思路书写一下 1.项目奖项的配置存储在MongoDB 配置的参数为 奖项的等级(prizeLevel).数量(prizeNum).奖项的名称(prizeN ...

  7. python利用select实现的Socket Server

    # 利用python的select模块实现简单的Socket Sever #实现多用户访问,再次基础上可以实现FTP Server应用程序 # 发布目的,在于解决了客户端强行终止时,服务器端也跟着程序 ...

  8. ES 24 - 如何通过Elasticsearch进行聚合检索 (分组统计)

    目录 1 普通聚合分析 1.1 直接聚合统计 1.2 先检索, 再聚合 1.3 扩展: fielddata和keyword的聚合比较 2 嵌套聚合 2.1 先分组, 再聚合统计 2.2 先分组, 再统 ...

  9. 一文了解：Redis基础类型

    Redis基础类型 Redis特点 开源的,BSD许可高级的key-value存储系统 可以用来存储字符串,哈希结构,链表,集合 安装 windows:https://github.com/micro ...

  10. istio入门教程

    广告 | kubernetes各版本离线安装包 安装 安装k8s 强势插播广告 三步安装,不多说 安装helm, 推荐生产环境用helm安装,可以调参 release地址 如我使用的2.9.1版本 y ...