900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 百度地图JavaScript API 学习之地址解析

百度地图JavaScript API 学习之地址解析

时间:2021-08-10 11:27:59

相关推荐

百度地图JavaScript API 学习之地址解析

获取地图数据之地址解析

首先我们需要知道如何进行地址解析以及有哪些地址解析的方式

其实,百度地图API给我们提供了2种解析方式:地址解析逆地址解析

下面我们来认识一下它们。【官方的介绍地址请点这里查看】

简介

地址解析服务提供从地址转换到经纬度的服务。逆地址解析则提供从经纬度坐标转换到地址的转换功能。

具体如下图所示:

单词解释

一说到地址解析,就涉及到了两个重要的概念,那就是地理坐标中的——经度纬度

我们先来认识一下这两个单词,因为代码中要用到,而且这两个单词也挺好记忆的:

经度longitude 英 [ˈlɒŋgɪtju:d]纬度latitude 英 [ˈlætɪtju:d]

其次,我们还需要知道地理定位的这个单词:

地理定位geolocation 英 [dʒɪɒləʊ'keɪʃn]

疑问:为什么呢?

原因:地理定位(Geolocation)HTML5的重要特性之一,提供了确定用户位置的功能。

HTML5 地理定位【详情请看这里】

所以,关于地理定位我们必须要知道

HTML5 Geolocation API用于获得用户的地理位置。该API中使用getCurrentPosition()方法来获得用户的位置。

百度API提供的地址解析类【详情见类参考】

Geocoder:地址解析 / 逆地址解析,用于坐标与地址间的相互转换。

核心类Geocoder的类参考如图所示:

由上图可知:

Geocoder类有一个名为Geocoder()的构造函数,使用时将它实例化就行了。即new一个新的对象,就相当于创建了一个地址解析器的实例。代码:var myGeo = new BMap.Geocoder();然后该构造函数存在两个方法,根据方法名很容易能猜出方法的功能:

getPoint()得到地理坐标点,即经纬度信息。【根据手动提供的地址信息获取】getLocation()得到当前用户的具体地址信息。【根据用户当前的地理位置自动获取】使用方法:

myGeo.getPoint(要解析的地址信息,function(回调函数的参数){},城市名);myGeo.Locaiton(当前位置的地理坐标点,function(回调函数的参数){},options);注:options为可选参数,一般来说不用写。

地址解析服务【先学习第一种】

地址解析服务,即根据地址描述获得坐标信息。

下面我们来看看如何进行地址解析。百度地图API都提供了哪些方法给我们调用呢?

(1)百度地图API提供了Geocoder进行地址解析

(2)可以通过Geocoder.getPoint()方法来将一段地址描述转换为一个坐标

分析:

(1)百度地图已经为我们提供了地址解析的类,名为Geocoder

(2)使用的时候,只需要通过它的构造函数Geocoder()进行实例化,即new一个对象,然后去调用它的getPoint()方法就实现了地址解析的功能了。

疑问:解析成功后的结果在哪里返回呢?

答案:GeocoderResult类表示Geocoder的地址解析结果。它在地址解析的回调函数的参数中返回而且不可实例化

Geocoder.getPoint()方法中的第二个参数callback,在回调函数callback的参数中,GeocoderResult作为结果返回。换句话说就是,地址解析成功后,地址解析的结果,即GeocoderResult类,它会作为回调函数的参数进行返回。而且返回的这个参数值是GeocoderResult类的属性point,即坐标点。这个参数point是百度地图API规定好的所以,回调函数的参数最终返回的是一个Point类型的坐标点。

//回调函数function(point){//里面写地址解析成功想做的事..console.log(point);}

具体如何使用呢?(看代码)

如下示例,我们将地址“北京市海淀区上地10街10号”进行转换来获取该位置的地理经纬度坐标,并在这个位置上添加一个标注。

注意:在调用Geocoder.getPoint()方法时,需要提供地址解析所在的城市(本例为“北京市”)

var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);/*至此,百度地址初始化完成*/// 创建地址解析器实例var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint("北京市海淀区上地10街10号", function(point){//回调函数if (point) {map.centerAndZoom(point, 16);map.addOverlay(new BMap.Marker(point));}}, "北京市");

代码示例

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style><script type="text/javascript" src="http://api./api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script><title>地址解析</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");//创建一个map实例,allmap表示地图容器var point = new BMap.Point(116.331398,39.897445);//创建点坐标map.centerAndZoom(point,12);//初始化地图,设置地图的中心点坐标和缩放级别// 创建地址解析器实例/* Geocoder类用于获取用户的地址解析。* 构造函数:Geocoder() 创建一个地址解析器的实例*方法:getPoint(address: String, callback: Function, city: String) 对指定的地址进行解析。*如果地址定位成功,则以地址所在的坐标点Point为参数调用回调函数。否则,回调函数的参数为null。*city为地址所在的城市名,例如“北京市”。*/var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint("北京市海淀区上地10街", function(point){if (point) {map.centerAndZoom(point, 16);//以下代码向地图中心点point添加了一个标注,并将该标注添加到地图中// map.addOverlay(new BMap.Marker(point));//Marker:标注表示地图上的点,可自定义标注的图标。var mark = new BMap.Maker(point);//Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。map.addOverlay(mark);}else{alert("您选择地址没有解析到结果!");}}, "北京市");//注:该方法存在3个参数,最后一个参数“城市名”别忘了!</script>

效果图展示

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。