1、效果图

　　

2、源码

主要使用百度地图的JavaScript API文件，以及一个JQuery文件。

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>地图Demo2</title>

     <style type="text/css">

         html{height:100%}

         body{height:100%;margin:0px;padding:0px}

         #map_canvas{

             margin:0 auto;

             border:2px solid #f9f7f6;

             width:80%;

             height:80%;

             }    

     </style>

  </head>

  <body>

     <div id="map_canvas"></div>

     <script src="jquery-2.1.4.min.js"></script>

     <script src="http://api.map.baidu.com/api?v=2.0&ak=74af171e2b27ee021ed33e549a9d3fb9"></script>

     <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

     <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

     <script type="text/javascript">

         var map = new BMap.Map("map_canvas");          // 创建地图实例

         var initLat = 39.916527;

         var initLng = 116.397128;

         var point = new BMap.Point(initLng, initLat);  // 创建点坐标

         map.centerAndZoom(point, 13);                 // 初始化地图，设置中心点坐标和地图级别  

         //var marker = new BMap.Marker(point);        // 创建标注

         //map.addOverlay(marker);                     // 将标注添加到地图中

         map.enableScrollWheelZoom();                            // 启用滚轮放大缩小

         map.addControl(new BMap.NavigationControl());           // 启用放大缩小 尺

         //获取当前位置

         var geolocation = new BMap.Geolocation();

         geolocation.getCurrentPosition(function(r){

             if(this.getStatus() == BMAP_STATUS_SUCCESS){

                 mk = new BMap.Marker(r.point);

                 mk.addEventListener("dragend", showInfo);

                 mk.enableDragging();    //可拖拽

                 getAddress(r.point);

                 map.addOverlay(mk);//把点添加到地图上

                 map.panTo(r.point); 

             }else {

                 alert('failed'+this.getStatus());

             }

         });

         //绑定Marker的拖拽事件

         function showInfo(e){

             var gc = new BMap.Geocoder();

             gc.getLocation(e.point, function(rs){

                 var addComp = rs.addressComponents;

                 var address = addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址

                 //画图 ---》显示地址信息

                 var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});

                 map.removeOverlay(mk.getLabel());//删除之前的label 

                 mk.setLabel(label);

                 //alert(e.point.lng + ", " + e.point.lat + ", "+address);

              });

         }

         //获取地址信息，设置地址label

         function getAddress(point){

             var gc = new BMap.Geocoder();

             gc.getLocation(point, function(rs){

                 var addComp = rs.addressComponents;

                 var address =  addComp.province +  addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址

                 //画图 ---》显示地址信息

                 var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});

                 map.removeOverlay(mk.getLabel());//删除之前的label 

                 mk.setLabel(label);

              });

         }

     </script>

  </body>

 </html>

百度地图小Demo---获取当前地址以及拖拽显示地址的更多相关文章

  1. 实现百度地图导航Demo的语音播报功能

    上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...

  2. 利用百度地图API，获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  3. IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息

    IOS中使用百度地图定位后获取城市坐标,城市名称,城市编号信息 /**当获取到定位的坐标后,回调函数*/ - (void)didUpdateBMKUserLocation:(BMKUserLocati ...

  4. 百度地图中如何获取到发布的SHA1

    百度地图中如何获取到发布的SHA1 下面介绍的是一种通过命令的方式获取到发布版SHA1的方法: 打开Android的命令行Terminal: 1.首先进入到.android文件所在的目录,我的是如下图 ...

  5. iOS 百度地图 小的特点demo

    先上图的样子 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDEyMzIwOA==/font/5a6L5L2T/fontsize/400/fill ...

  6. 用户Ip地址和百度地图api接口获取用户地理位置（经纬度坐标，城市）

    <?php   //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){     if(!empty($_SERVE ...

  7. 使用百度地图API自动获取地址和经纬度

    先上效果图,这是直接点击获取经纬度和地址的.没有做搜索的功能. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  8. 微信小程序自动定位，通过百度地图根据经纬度获取该地点所在城市信息

    微信小程序获得经纬度 var that = this wx.getLocation({ type: 'wgs84', success(res) { console.log(res) that.setD ...

  9. 百度地图的demo提示key验证错误！错误码：230;

    在已经有BaiduMap的APIKey后使用AndroidStudio导入Baidu地图的as版的demo,提示key验证错误!错误码:230; 首先,因为百度地图demo中用自己的keystore文 ...

随机推荐

  1. OpenStack 初探（一） -- All-In-One模式部署（初学OpenStack必备）

    OpenStack 初探(一) -- All-In-One模式部署(初学OpenStack必备) 一.操作前需了解:     1. OpenStack提供IaaS(基础设施即服务)服务,它是开源的云计 ...

  2. spring 注解验证@NotNull等使用方法

    @Null 被注释的元素必须为null@NotNull 被注释的元素不能为null@AssertTrue 被注释的元素必须为true@AssertFalse 被注释的元素必须为false@Min(va ...

  3. T-SQL 日期

    --日期查询格式 ) --R:06/17/2011 ) --R:2011.06.17 ) --R:17/06/2011 ) --R:17.06.2011 ) --R:17-06-2011 ) --R: ...

  4. 脱壳系列_2_IAT加密壳_详细版解法1(含脚本)

    1 查看壳程序信息 使用ExeInfoPe 分析: 发现这个壳的类型没有被识别出来,Vc 6.0倒是识别出来了,Vc 6.0的特征是 入口函数先调用GetVersion() 2 用OD找OEP 拖进O ...

  5. 8天入门docker系列 —— 第八天 让程序跑在swarm集群上

    真正的落地部署都是希望程序跑在集群下,而不是单机版下测测玩玩,所以这篇就来聊一下怎么使用docker swarm进行部署,因为是swarm是docker自带的, 所以部署起来还是非常简单的. 一:前置 ...

  6. 跟着大彬读源码 - Redis 8 - 对象编码之字典

    目录 1 字典的实现 2 插入算法 3 rehash 与 渐进式 rehash 总结 字典,是一种用于保存键值对的抽象数据结构.由于 C 语言没有内置字典这种数据结构,因此 Redis 构建了自己的字 ...

  7. Docker相关地址

    Docker社区版(CE)地址: https://hub.docker.com/search/?type=edition&offering=community Docker文档地址: http ...

  8. 伽马变换（一些基本的灰度变换函数）基本原理及Python实现

    1. 基本原理 变换形式 $$s=cr^{\gamma}$$ c与$\gamma$均为常数 可通过调整$\gamma$来调整该变换,最常用于伽马校正与对比度增强 2. 测试结果 图源自skimage ...

  9. spring cloud stream 经验总结

    ---恢复内容开始--- 基本概念 spring: cloud: stream: kafka: binder: brokers: cloudTest:19092 zk-nodes: cloudTest ...

  10. 【科研民工笔记2】Ubuntu 16.04 安装nvidia驱动

    我的主机是2060的显卡,用的是安装在U盘中的Ubuntu,开机进入后,因为没有安装驱动,所以界面看以来比较大. 通过手动方式,成功安装驱动,最终成功的方案使用的是run文件安装的方式. 1.手动下载 ...