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. httpclient 方式提供接口

    在后台写好自己的方法: 打开shiro验证,设置url访问: 提供包调用http方式连接后台获取数据: String url = getUrl(); HttpClient client = new H ...

  2. springboot集成activiti6.0多数据源的配置

    最近公司开始开发springboot的项目,需要对工作流进行集成.目前activiti已经发布了7.0的版本,但是考虑到6.0版本还是比较新而且稳定的,决定还是选择activiti6.0的版本进行集成 ...

  3. halcon视频教程如何学习？怎么样才能踏入机器视觉这个行业？

    本人是工作八年的视觉工程师,主要从事Halcon和Visionpro视觉开发,谈谈个人对视觉学习看法: 1.HALCON是德国MVtec公司开发的一套完善的标准的机器视觉算法包,它节约了产品成本,缩短 ...

  4. istio使用教程

    kubernetes各版本离线安装包 安装 安装k8s 强势插播广告 三步安装,不多说 安装helm, 推荐生产环境用helm安装,可以调参 release地址 如我使用的2.9.1版本 yum in ...

  5. Vue2.0仿饿了么webapp单页面应用

    Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...

  6. JavaSE（一）Java程序的三个基本规则-组织形式，编译运行，命名规则

    一.Java程序的组织形式       Java程序是一种纯粹的面向对象的程序设计语言,因此Java程序必须以类(class)的形式存在,类(class)是Java程序的最小程序单位.       J ...

  7. POI导入excel

    前言 在做后台管理的时候经常会用到excel导入的问题,就是将excel中的内容批量导入到数据库中,正好在新项目中我也做了excel导入的功能,来分享给大家,也给自己做个记录. 核心思想 excel导 ...

  8. OpenCV中图像处理

    一.颜色空间转换 1.cv2.cvtColor(input_img,flag) 参数1是要转换的图像 参数2是转换类型  例如:cv2.COLOR_BGR2HSV (RGB->HSV) cv2. ...

  9. 基于RBAC的权限框架

    RBAC权限框架(Role-Based Access Control)基于角色的权限访问控制的框架,通过用户-角色-权限的关联,非常方便的进行权限管理,在这里不再说明什么是RBAC,请自行百度. 谢谢 ...

  10. 基于 Lerna 管理 packages 的 Monorepo 项目最佳实践

    本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/NlOn7er0ixY1HO40dq5Gag作者:孔垂亮 目录 一.背景二.Monorepo vs M ...