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. HashSet源码解读

    一:先看其实现了哪些接口和继承了哪些类 1.实现了Serializable接口,表明它支持序列化. 2.实现了Cloneable接口,表明它支持克隆,可以调用超类的clone()方法进行浅拷贝. 3. ...

  2. java基础知识必备（一）

    一,开发前奏        a.Java语言的发展历史.       Java语言是美国Sun公司(Stanford University Network/斯坦福大学网络公司),       在199 ...

  3. jQuery入门一（jQuery下载以及基本语法）

    1. jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是 ...

  4. 【Unity游戏开发】不接SDK也能在游戏内拉起加QQ群操作？

    一.引子 一般在游戏进行对外测试的时候都会有一个玩家QQ群,方便玩家反馈问题.交流游戏心得等.那么为了增加玩家加QQ群的欲望,可能会在游戏里面设计一个小功能,点击一下可以直接拉起手Q加群的操作,加了Q ...

  5. HelloDjango 系列教程：创建 Django 博客的数据库模型

    文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 设计博客的数据库表结构 博客最主要的功能就是展示我们写的文章,它需要从某个地方获取博客文章数据才能把文章展示出来,通常来说这个 ...

  6. C++虚函数的工作原理

    静态绑定与动态绑定 讨论静态绑定与动态绑定,首先需要理解的是绑定,何为绑定?函数调用与函数本身的关联,以及成员访问与变量内存地址间的关系,称为绑定. 理解了绑定后再理解静态与动态. 静态绑定:指在程序 ...

  7. jdk8与jdk7中hashMap的resize分析

    在分析代码之前,我们先抛出下面的问题: hashmap 扩容时每个 entry 需要再计算一次 hash 吗? 我们首先看看jdk7中的hashmap的resize实现 1 void resize(i ...

  8. 夯实Java基础（十三）——字符串

    字符串应该是我们在Java中用的最频繁.最多的,可见字符串对于我们来说是多么的重要,所以我们非常有必要去深入的了解一下. 1.String String就代表字符串,在Java中字符串属于对象.我们刚 ...

  9. spring-boot项目的docker集成化部署（一）

    目录 spring-boot项目的docker集成化部署 前言 基本思路与方案 基本步骤 准备源码 服务器和基础环境 结语 1. 本文总结: 2. 后期优化: spring-boot项目的docker ...

  10. Java虚拟机详解（四）------垃圾收集器

    上一篇博客我们介绍了Java虚拟机垃圾回收,介绍了几种常用的垃圾回收算法,包括标记-清除,标记整理,复制等,这些算法我们可以看做是内存回收的理论方法,那么在Java虚拟机中,由谁来具体实现这些方法呢? ...