<!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. Codeforces 1144 E. Median String

    原题链接:https://codeforces.com/problemset/problem/1144/E tag:字符串模拟,大整数. 题意:给定两个字符串,求字典序中间串. 思路:可以把这个题当做 ...

  2. 如何阅读zstack源码

    个人的gitbook将会持续更新 https://www.gitbook.com/book/jingtyu/how-to-learn-zstack-code

  3. typescript 公共，私有与受保护的修饰符

    public理解 当你在程序中没有指明修饰符时,默认为public,也就是在类内类外都可以访问,我们以下面的例子来解释. class Person{ name:string sex:string ag ...

  4. PyCharm 配置 Git 教程

    之前给大家介绍了 Git 安装及使用指南,今天再给大家介绍一下在 PyCharm 中使用 Git. 1 打开 File -> Settings -> Version Control -&g ...

  5. Android：JNI与NDK(二)交叉编译与动态库，静态库

    欢迎关注公众号,第一时间获取最新文章: 本篇目录 一.前言 本篇主要以window开发环境为背景介绍一下NDK开发中需要掌握的交叉编译等基础知识,选window系统主要是照顾大多数读者,mac ,li ...

  6. .net持续集成测试篇之Nunit常见断言

    系列目录 Nunit测试基础之简单断言 在开始本篇之前需要补充一些内容,通过前面搭建Nunit测试环境我们知道要使一个方法成为单元测试方法首先要在此方法所在类加上TestFixture注解,并且在该方 ...

  7. 用机智云做PWM占空比控制电机，物联网智能家居应用

      因为是新申请的博客,所以申请了总想往里面加点东西,所以把我之前在机智云写的帖子复制了过来 (各位抱歉,由于之前上传的文件可能有错误,之前上传的文件PWM不能用,那么我又重新上传了一个文件,这个文件 ...

  8. java在src/test/resourse下读取properties文件

    package com.jiepu; import java.io.File; import java.net.URISyntaxException; import java.util.Map; im ...

  9. 搭建nexus私服

    一.安装 1.从网上下载nexus软件https://www.sonatype.com/download-oss-sonatype  下载Nexus Repository Manager OSS软件包 ...

  10. Python基础总结之认识lambda函数、map函数、filter() 函数。第十二天开始（新手可相互督促）

    今天周日,白天在学习,晚上更新一些笔记,希望对大家能更好的理解.学习python~ lambda函数,也就是大家说的匿名函数.它没有具体的名称,也可以叫做一句话函数,我觉得也不过分,大家看下代码,来体 ...