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. 如何在Windows上使用Python进行开发

    本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 一直以来C#都是微软在编程语言方面最为显著的Tag,但时至今日Python ...

  2. python课堂整理15---map, filter,reduce函数

    一.map函数 处理序列(可迭代对象)中的每一个元素,得到的结果是一个‘列表’(其实是个迭代器),该‘列表’元素个数及位置与原来一样 理解下面这段代码: num_l = [1, 2, 4, 6] de ...

  3. kaptcha谷歌验证码工具

    Kaptcha 简介 Kaptcha 是一个可高度配置的实用验证码生成工具,可自由配置的选项如: 验证码的字体 验证码字体的大小 验证码字体的字体颜色 验证码内容的范围(数字,字母,中文汉字!) 验证 ...

  4. 【TensorFlow 3】mnist数据集：与Keras对比

    在TF1.8之后Keras被当作为一个内置API:tf.keras. 并且之前的下载语句会报错. mnist = input_data.read_data_sets('MNIST_data',one_ ...

  5. 网站性能优化的方法--Yahoo

    如何能让用户更快的打开我们的网页? 1.尽可能减少HTTP请求数 2.使用CDN(内容分发网络) 3.添加Expire/Cache-Control头 4.启用Gzip压缩 5.将CSS放在页面最上面 ...

  6. Charles（Windows/Android）入门使用

    一. 介绍以及下载(windows) Charles是一个HTTP代理/HTTP监视器/反向代理,使开发人员能够查看其机器和Internet之间所有HTTP和SSL/HTTPS流量,这包括请求,响应和 ...

  7. 【Mac】解压文件夹中文乱码

    Mac 用的英文系统,发现下载含中文的文件后,解压为乱码,如图所示: 解决方法: 下载一个解压软件:"The Unarchiver" 安装后设置下,如图: 之后设置压缩文件的默认打 ...

  8. 【OpenCV-ANN神经网络自动驾驶】树莓派OpenCV神经网络自动驾驶小车【源码+实物】

    没错!这个是我的毕业设计!!! 整个电子信息学院唯一一个优秀毕业设计 拿到这里炫耀了 实物如下: 电脑端显示效果: 自动驾驶实现过程: 1． 收集图像数据.建立局域网,让主机和Raspberry Pi ...

  9. 自定义itemClickView

    极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...

  10. Windows 下安装 Python + Django

    Django是Python的一个Web开发框架,以下是介绍的是windows下的安装步骤, 作者的环境是Win10 ,Windows Server 也是一样的 以下是作者整理的步骤,也可以参考官方教程 ...