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. Linux更换默认Security源

    很多时候 修改了软件源,但是发现更新还是很慢,查看一下,如下图,有一个security ,显然主源还是在ubuntu,ubuntu本身在国外,所以很慢,因此考虑替换为国内镜像. 图1 1.备份数据源列 ...

  2. 模板配置教程：Phpcms v9怎么更换模板

    先分享下大概的步骤: 1.上传模版文件到服务器: 2.在站点管理 里边[模板风格配置]选择新模板: 3.设置不同模型对应模板: 4.修改现有的栏目,匹配新模板: 5.更新栏目缓存.系统缓存,更新HTM ...

  3. git 必看，各种撤销操作

    场景概念说明 首先说明一个概念, git是一个分布式的版本控制工具,分布式即 git 管理的项目是有多个大致平等的仓库的.通过一个例子来说明这个东西. 举一个最简单的使用场景: 你在github 建立 ...

  4. 动态规划_Sumsets_POJ-2229

    Farmer John commanded his cows to search . Here are the possible sets of numbers that sum to : ) +++ ...

  5. css常用知识与用法

    1 类选择器就是再 某一个标签后面加上class  =“”     然后再到前面去定义这个class   一定要记住前面加. 2 id选择器和类选择器是差不多的   不过id选择器前面不加.而加#   ...

  6. Core CLR Host 源码简单分析

    在定制 CLR Host的时候,可以通过调用如下代码,来获取当前需要被宿主的程序调用入口: hr = Host->CreateDelegate( domainId, L"Main,Ve ...

  7. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  8. dubbo文档笔记

    配置覆盖关系 以 timeout 为例,显示了配置的查找顺序,其它 retries, loadbalance, actives 等类似: 方法级优先,接口级次之,全局配置再次之. 如果级别一样,则消费 ...

  9. HttpClientFactory 使用说明 及 对 HttpClient 的回顾和对比

    目录 HttpClient 日常使用及坑点: HttpClientFactory 优势: HttpClientFactory 使用方法: 实战用法1:常规用法 1. 在 Startup.cs 中进行注 ...

  10. 什么是https？http升级为https需要什么？

    一.什么是https? https是一种加密传输协议,网站使用https后可以避免敏感信息被第三方获取.https加密协议=SSL / TLS+http协议,也就是说,在传统的http协议上加上SSL ...