<!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. 非controller层获取response和request对象

    ServletRequestAttributes attrs = (ServletRequestAttributes) RequestContextHolder.getRequestAttribute ...

  2. python带有GIL解释器锁

    1.GIL是什么?GIL的全称是Global Interpreter Lock(全局解释器锁),来源是python设计之初的考虑,为了数据安全所做的决定. 2.每个CPU在同一时间只能执行一个线程(在 ...

  3. python3 导入包总提示no moudle named xxx

    一.python中的包有三种 1.python自带的包,如sys, os 2.python的第三方库,如 requests, selenium 3.自己写的.py文件 二.今天主要说下导入自己写的包 ...

  4. java连接oracle数据库jdbc

    driver = oracle.jdbc.driver.OracleDriver url = jdbc:oracle:thin:@localhost:1521:orcl

  5. 脱壳0-FSG壳-详细流程

    目录 @ 1 拿到当前加壳程序,用exeinfo/PeID 看一下信息 可以看出是很老的壳FSG. 分析: ​ Entry Point : 000000154,熟悉PE结构的知道,入口点(代码)揉进P ...

  6. python 爬取豆瓣电影评论，并进行词云展示及出现的问题解决办法

    本文旨在提供爬取豆瓣电影<我不是药神>评论和词云展示的代码样例 1.分析URL 2.爬取前10页评论 3.进行词云展示 1.分析URL 我不是药神 短评 第一页url https://mo ...

  7. Liunx C 编程之多线程与Socket

    多线程 pthread.h是linux特有的头文件,POSIX线程(POSIX threads),简称Pthreads,是线程的POSIX标准.该标准定义了创建和操纵线程的一整套API.在类Unix操 ...

  8. 【Java例题】4.5异常处理

    5. 对于输入的数,如果出现小数,则作为异常处理,并舍去小数,显示结果:如果输入的数据类型不对也作为异常处理,显示结果0. package chapter4; import java.util.*; ...

  9. CentOS yum 源修改

    修改 CentOS 默认 yum 源为 mirrors.163.com 首先备份系统自带yum源配置文件/etc/yum.repos.d/CentOS-Base.repo [root@localhos ...

  10. 原生JavaScript（js）手把手教你写轮播图插件（banner）

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...