获取地图数据之地址解析
首先我们需要知道如何进行地址解析以及有哪些地址解析的方式。
其实,百度地图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.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script> -->
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8&services=&t=20190123111209"></script>
<title>地址解析</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");//创建一个map实例,allmap表示地图容器
map.disableDragging();//禁止拖拽
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:标注表示地图上的点,可自定义标注的图标。
//marker的动画效果:自定义图片(动画效果还可以将png格式的图片换成gif的图片)
var markerImg= new BMap.Icon("timg.gif", new BMap.Size(50, 50)); //size 分别对应marker的 宽 和 高, 图片应该设置成marker的大小
//marker = new BMap.Marker(point, { icon: markerImg}); // 创建标注
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //弹跳效果(一直跳动)
//marker.setAnimation(BMAP_ANIMATION_DROP); //坠落效果(从顶部落下)
var mark = new BMap.Marker(point);
mark.setAnimation(BMAP_ANIMATION_BOUNCE);
//Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。
map.addOverlay(mark);
}else{
alert("您选择地址没有解析到结果!");
}
}, "北京市");//注:该方法存在3个参数,最后一个参数“城市名”别忘了!
</script>