<!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. CentOS 7.2配置LAMP环境——yum版

    环境:CentOS 7.2 采用putty连接 方法:采用yum安装方法 目的:搭建Apache+MySQL+PHP环境 1.安装Apache yum install httpd //默认情况下,选择 ...

  2. 我对微服务、SpringCloud、k8s、Istio的一些杂想

    一.微服务与SOA “微服务”是一个名词,没有这个名词之前也有“微服务”,一个朗朗上口的名词能让大家产生一个认知共识,这对推动一个事务的发展挺重要的,不然你叫微服务他叫小服务的大家很难集中到一个点上. ...

  3. linux初学者-常用基本命令篇

    linux系统中有着许许多多的命令,并且软件也有可能自带命令,要想全部了解这些命令是很困难的,但是有一些基本命令是在平时的学习工作中应用的很广泛的.以下简要介绍几种linux系统中的常用命令. 1.m ...

  4. 如何编译生成Linux-C静态链接库

    目标生成的静态库文件为:libnpcp.a 举例:我们有四个文件分别为:npcp.c npcp.h other.h main.c main.h在npcp.c里面#include "other ...

  5. MD、SHA、MAC消息摘要算法实现与应用

    1.消息摘要概述 消息摘要(Message Digest)又称为数字摘要(Digital Digest).它是一个唯一对应一个消息或文本的固定长度的值,它由一个单向Hash加密函数对消息进行作用而产生 ...

  6. 箭头函数=>

    箭头函数特点一:没有自己的this对象,其this对象为所在环境 特点二 :没有arguments参数 可以用...rest代替特点三:不能使用构造函数,不可使用new命令,否则会报错 //函数的扩展 ...

  7. 【Android Studio】查看源码时提示“throw new RuntimeException("Stub!")”

    如题-- 详细问题及解决方法: http://blog.csdn.net/u010917495/article/details/51234179

  8. Vue中动态（import 、require）显示img图片

    vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...

  9. Codeforces Round #192 (Div. 2) (330A) A. Cakeminator

    题意: 如果某一行没有草莓,就可以吃掉这一行,某一列没有也可以吃点这一列,求最多会被吃掉多少块蛋糕. //cf 192 div2 #include <stdio.h> #include & ...

  10. 1. 源码分析---SOFARPC可扩展的机制SPI

    这几天离职在家,正好没事可以疯狂的输出一下,本来想写DUBBO的源码解析的,但是发现写DUBBO源码的太多了,所以找一个写的不那么多的框架,所以就选中SOFARPC这个框架了. SOFARPC是蚂蚁金 ...