[置顶] 百度地图JavaScript API 学习之逆地址解析

标签: 百度地图JS API之逆地址解析
95人阅读 评论(0) 收藏 举报
分类:

获取地图数据之逆地址解析

上篇博文我们说了地址解析,即通过我们自己提供的地址信息来解析出该地址所对应的地理位置坐标(或称经纬度)

现在我们再来看一下逆地址解析。

逆地址解析服务【官方介绍请点这里】

根据坐标点获得该地点的地址描述,是地址解析的逆向转换。

这里写图片描述

使用方法

  • 您可以通过Geocoder.getLocation()方法获得地址描述。
  • 当解析工作完成后,您提供的回调函数将会被触发。
  • 如果解析成功,则回调函数的参数为GeocoderResult对象,否则为null

getLocation()方法 【该方法的详情见这里】

这里写图片描述

用法:

var myGeo = new BMap.Geocoder();
//注:第二个参数为回调函数,它的参数是一个GeocoderResult对象;第三个参数options为可选参数,是LocationOptions类型的
myGeo.getLocation(point,function(obj){},options);
//LocationOptions类表示Geocoder的地址解析请求的可选参数。它不可实例化。

GeocoderResult【该类的参考详情见这里】

这里写图片描述

基础用法:根据经纬度获取地址

//首先,创建一个地图实例
var map = new BMap.Map("allmap");      
//然后进行地图初始化(用一个Point坐标点和缩放级别来初始化地图。)
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);   
/*至此,地图初始化完成*/

// 创建地理编码(地理解析器)实例      
var myGeo = new BMap.Geocoder();      
// 根据坐标得到地址描述    
myGeo.getLocation(new BMap.Point(116.364, 39.993), function(result){      
    if (result){      
    alert(result.address);      
    }      
});

进阶用法:鼠标点击地图获取地址

这里涉及到了一个新的知识点:地图事件及事件处理【详情介绍见这里】

  • 百度地图API中的大部分对象都含有addEventListener方法,我们可以通过该方法来监听对象事件。
    • 例如,BMap.Map包含click、dblclick等事件。
  • 在特定环境下这些事件会被触发,同时监听函数会得到相应的事件参数e
    • 比如当用户点击地图时,e参数会包含鼠标所对应的地理位置point
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
/*至此,地图初始化完成*/

var geoc = new BMap.Geocoder();  
//为地图实例添加了鼠标单击的监听行为  
map.addEventListener("click", function(e){        
    var pt = e.point;
    //第一个参数为要逆解析的坐标点;第二个参数为回调函数
    geoc.getLocation(pt, function(rs){//回调函数中的参数rs是一个GeocoderResult对象
        //GeocoderResult对象的addressComponents属性返回了一个结构化的地址描述
        var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });        
});

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <title>点击地图展示详细地址</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            font-family: "Microsoft Yahei";
            overflow: hidden;
            margin: 0;
        }
        #allmap{
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
</head>
<body>
    <div id="allmap"></div>
    <script>
        //百度地图API功能
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);
        //地图初始化完成

        //地图的配置:启用鼠标滚轮放大缩小功能(默认不开启)
        map.enableScrollWheelZoom(true);
        //创建一个地址解析器的实例
        var geoc = new BMap.Geocoder();

        //为地图实例添加了一个鼠标单击的监听事件
        map.addEventListener("click",function(e){
            //事件参数e中保存了鼠标单击时所对应的地理位置point
            var pt = e.point;
            //将鼠标单击时的坐标进行逆地址解析
            geoc.getLocation(pt,function(rs){//解析的结果是一个对象,且作为参数传入了回调函数中
                //该对象的属性中保存了解析后的结构化的地址信息
                var addrComp = rs.addressComponents;
                console.log(addrComp);
                //{streetNumber: "", street: "西长安街", district: "东城区", city: "北京市", province: "北京市"}
                alert(addrComp.province + "," + addrComp.city + "," + addrComp.district + "," + addrComp.street + "," + addrComp.streetNumber)
            })
        });
    </script>
</body>
</html>

效果展示

这里写图片描述

查看评论

关于WEB应用程序的打印组件开发初探

 一、引言  近些年来,随着互联网的普及和推广,传统的单机模式和局域中的C/S模式的应用程序越来越不能满足信息共享的要求。因此,一种新的基于浏览器的B/S的应用程序的开发方式被提了出来。新的开发方案以...
  • ChenHui
  • ChenHui
  • 2001-01-06 16:03:00
  • 1077

js引入高德地图,加标注,逆地理编码

1. 添加 ,key值需要自己申请 2. 地图显示容器 3.地点位置显示 4. js代码 $().ready(function(){  var map,marker;  v...
  • lengxin337
  • lengxin337
  • 2016-11-03 15:09:50
  • 2160

AngularJs 利用百度地图API 定位当前位置 获取地址信息

利用angular+百度地图API实现定位获取当前地址信息
  • pandongzi_2017
  • pandongzi_2017
  • 2017-01-18 14:50:32
  • 1984

百度地图使用小结

1.清除绘制的上一次的交通图层: // 清除交通图层 if (routeOverlay != null) { mMapView.getOverlays().remove(routeO...
  • yueqinglkong
  • yueqinglkong
  • 2014-02-21 11:01:52
  • 6140

百度地图用户点击地图获取位置信息(经纬度坐标)

实现BaiduMap.OnMapClickListener接口private BaiduMap baiduMap; baiduMap = textureMapView.getMap(); //text...
  • qq_38038931
  • qq_38038931
  • 2018-04-13 18:00:37
  • 21

百度地图

PC端定位不准确  主要应用到移动端 第一、申请百度密钥  很简单的几步就搞定 第二、引入文件 html 代码 效果预览 12345 ...
  • sinat_38992528
  • sinat_38992528
  • 2017-11-17 16:11:15
  • 96

第一次使用百度地图API

最近在项目中在添加客户功能时需要实现对客户地址进行地图选址的功能,包括添加页面的选址以及编辑页面的地址定位。现将第一次使用的心得记录下来。首先搜索百度地图的官网“http://lbsyun.baidu...
  • congtoulaiguo_dxl
  • congtoulaiguo_dxl
  • 2018-01-13 19:55:32
  • 62

WEB页面接入百度地图,实现点击地图获取坐标和地址的功能

page language="java" pageEncoding="UTF-8" %> http-equiv="Content-Type" content="text/html; cha...
  • sinat_19671783
  • sinat_19671783
  • 2018-01-18 14:38:43
  • 84

HTML5获取地理位置及百度地图展示实例

HTML: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21   ht...
  • xiao190128
  • xiao190128
  • 2017-05-20 15:51:08
  • 297

平台--腾讯地图取经纬度

默认浏览器客户端IP定位 *{     margin:0px;     padding:0px; } body, button, input, select, textarea {  ...
  • MJ_RJ
  • MJ_RJ
  • 2016-09-09 15:34:42
  • 5118
    个人资料
    持之以恒
    等级:
    访问量: 3833
    积分: 495
    排名: 10万+
    文章存档
    最新评论