1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.         body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  8.         .button-full{
  9.             position: fixed;
  10.             bottom: 0;
  11.             left: 0;
  12.             z-index: 999;
  13.             height: 50px;
  14.             width: 100%;
  15.             line-height: 50px;
  16.             font-size: 16px;
  17.             text-align: center;
  18.             color: #fff;
  19.             background: #333;
  20.             text-decoration: none;
  21.         }
  22.     </style>
  23.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ***Your ak"></script>
  24.     <title>地图展示</title>
  25. </head>
  26. <body>
  27.     <div id="allmap"></div>
  28.     <a id="chosedBtn" class=" button-full">选择这个地址</a>
  29. </body>
  30. </html>

javascirpt

  1. <script type="text/javascript">
  2.     //创建默认初始化Map实例
  3.     (function(){
  4.  
  5.         mapObj = {
  6.             com: {
  7.                 map : new BMap.Map("allmap"),
  8.                 infoWindow :  new BMap.InfoWindow("正在载入..", {offset : new BMap.Size(20, -60)}),
  9.                 icon: new BMap.Icon("__IMG__/locate.png", new BMap.Size(60, 60)),
  10.                 iconOffsetSize: new BMap.Size(0, -30),
  11.                 chosedAddr: ""
  12.             },
  13.  
  14.             init: function(){
  15.                 var _this = this;
  16.  
  17.                 _this.default();
  18.  
  19.                 _this.initLocation().then(function(result){
  20.                     //清除掉默认的markerDefault
  21.                     _this.com.map.clearOverlays()
  22.  
  23.                     var marker = result.mk;
  24.                     var point = result.pt;
  25.  
  26.                     //取得当前位置的名字
  27.                     _this.getAddrAccordingPoint(point).then(function(res){
  28.                         _this.changeInfoWindowContent(res)
  29.                         //打开信息窗体
  30.                         _this.com.map.openInfoWindow(_this.com.infoWindow, point);
  31.                     }); 
  32.  
  33.                     //绑定拖动结束事件，获取经纬度
  34.                     marker.addEventListener("dragend", function(){
  35.                         var curPoint = marker.getPosition();
  36.                         console.log(curPoint)
  37.                         //取得拖动后当前位置的名字
  38.                         _this.getAddrAccordingPoint(curPoint).then(function(res){
  39.                             _this.changeInfoWindowContent(res)
  40.                             //打开信息窗体
  41.                             _this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);
  42.                         });
  43.                     });
  44.                     marker.addEventListener("click", function(){
  45.                         var curPoint = marker.getPosition();
  46.                         _this.getAddrAccordingPoint(curPoint).then(function(res){
  47.                             _this.changeInfoWindowContent(res)
  48.                             //打开信息窗体
  49.                             _this.com.map.openInfoWindow(_this.com.infoWindow, curPoint);
  50.                         })
  51.                     });
  52.                 })
  53.             },
  54.  
  55.             //默认打开地图的初始状态设置
  56.             default: function(){
  57.                 var _this = this;
  58.                 var point = new BMap.Point(114.062048, 22.54579);
  59.                 // 设置初始化地图,设置中心点坐标和地图级别
  60.                 _this.com.map.centerAndZoom(point, 12);  
  61.  
  62.                 //设置初次打开时，markerDefault，定位初始完毕会被销毁
  63.                 var markerDefault = new BMap.Marker(point);
  64.                 _this.com.map.addOverlay(markerDefault);
  65.                 markerDefault.setIcon(_this.com.icon);
  66.  
  67.                 //设置信息窗体宽度
  68.                 _this.com.infoWindow.setWidth(220);
  69.             },
  70.  
  71.             //獲取定位初始化地圖
  72.             initLocation: function (){
  73.                 var _this = this;
  74.                 return new Promise(function(resolve, reject){
  75.                     new BMap.Geolocation().getCurrentPosition(function(r){
  76.                         var lat = r.latitude;
  77.                         var long = r.longitude;
  78.                         var point = new BMap.Point(long, lat)
  79.  
  80.                         var marker = new BMap.Marker(point);
  81.                         marker.setOffset(_this.com.iconOffsetSize)
  82.                         marker.setIcon(_this.com.icon);
  83.                         marker.setAnimation(BMAP_ANIMATION_BOUNCE);
  84.                         var initObj = {
  85.                             pt: point,
  86.                             mk: marker
  87.                         } 
  88.  
  89.                         // 将标注添加到地图中
  90.                         _this.com.map.addOverlay(marker); 
  91.  
  92.                         //允许拖动
  93.                         marker.enableDragging();
  94.                         //不允许被clearOverlays方法清除
  95.                         marker.disableMassClear();
  96.  
  97.                         //地图指向当前的点（平移动画）
  98.                         _this.com.map.panTo(point);
  99.                         // 初始化地图,设置中心点坐标和地图级别
  100.                         _this.com.map.centerAndZoom(point, 16);  
  101.  
  102.                         resolve(initObj);
  103.                     })
  104.                 })
  105.             },
  106.  
  107.             //根据经纬度解析出位置的名称
  108.             getAddrAccordingPoint: function(point){
  109.                 var _this = this;
  110.                 return new Promise(function(resolve, reject){
  111.                     new BMap.Geocoder().getLocation(point, function(result){
  112.                         if (result){
  113.                             if(!!result.surroundingPois[0]){
  114.                                 _this.com.chosedAddr = result.address + " " +result.surroundingPois[0].title;
  115.                             }else{
  116.                                 _this.com.chosedAddr = result.address;
  117.                             }
  118.                             resolve(_this.com.chosedAddr)
  119.                         }
  120.                     });
  121.                 })
  122.             },
  123.  
  124.             //添加标注地址信息
  125.             changeInfoWindowContent: function(content){
  126.                 var _this = this;
  127.                 _this.com.infoWindow.setContent(content);
  128.             }
  129.         }; 
  130.  
  131.         //开始地图
  132.         mapObj.init();
  133.  
  134.         document.getElementById('chosedBtn').addEventListener('click', function(){
  135.             location.href = '<{:U("Channel/addChannelFollowLog")}>?address='+mapObj.com.chosedAddr
  136.         },false)    
  137.  
  138.     })()
  139. </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] 107 Binary Tree Level Order Traversal II (easy)

    原题 层序遍历,从自底向上按层输出. 左→右→中 解法一 : DFS,求出自顶向下的,最后返回时反转一下. class Solution { public: vector<vector<i ...

  2. Linux mysql开启远程访问

    默认情况下远程访问会出现 Can't connect to MySQL server on '192.168.10.18′ (10061) 错误是因为,mysql的默认配置为了增强安全性,禁止了非本机 ...

  3. Cocos2d-x 3.x中自定义渲染功能

    1.第一种方法针对的是整个图层的渲染         重写visit()函数,并且在visit()函数中直接向CommandQueue添加CustomCommand,设置好回调函数.          ...

  4. Linux命令之文件相关

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

  5. 从三个语言（C++，Java，.Net）的几个性能测试案例来看性能优化

    随着时间的发展,现在的虚拟机技术越来越成熟了,在有些情况下,Java,.Net等虚拟机密集计算的性能已经和C++相仿,在个别情况下,甚至还要更加优秀.本文详细分析几个性能测试案例,探讨现象背后的原因. ...

  6. CentOS 7服务器安装brook和bbr加速

    一.安装Brook 执行一键部署脚本 $ wget -N --no-check-certificate wget -N --no-check-certificate https://raw.githu ...

  7. 扩展欧几里德算法（递归及非递归实现c++版）

    今天终于弄懂了扩展欧几里德算法,有了自己的理解,觉得很神奇,就想着写一篇博客. 在介绍扩展欧几里德算法之前,我们先来回顾一下欧几里德算法. 欧几里德算法(辗转相除法): 辗转相除法求最大公约数,高中就 ...

  8. .netcore持续集成测试篇之Xunit数据驱动测试一

    系列目录 Nunit里提供了丰富的数据测试功能,虽然Xunit里提供的比较少,但是也能满足很多场景下使用了,如果数据场景非常复杂,Nunit和Xunit都是无法胜任的,有不少测试者选择自己编写一个数据 ...

  9. 【PYTHON】语法基础 | 开始使用Python

    Python的热度不言而喻,机器学习.数据分析的首选语言都是Python,想要学习Python的小伙伴也很多,我之前也没有认真用过Python,所以也想体验一下它的魅力,索性花了两天集中看了一下它的基 ...

  10. ASP.NET Core 框架本质学习

    本文作为学习过程中的一个记录. 学习文章地址: https://www.cnblogs.com/artech/p/inside-asp-net-core-framework.html 一. ASP.N ...