最近项目中在使用百度地图api,对于其中的一些有用的点做一些归纳整理,如有不对的地方,欢迎各位大神纠正指出。
一定要学会查找百度地图api提供的类参考网站:http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html,这个能加快对于地图的属性,方法等的应用。
一、创建地图
插入一个div用作地图的容器,地图的大小样式可根据项目需求对样式大小进行修改。
<style type="text/css"> body, html, #map { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微软雅黑"; } </style>
<div id="map"></div>
在html页中引入api所需要的js库 如下:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <script type="text/javascript"> var map = new BMap.Map("map"); // 创建Map实例 var lng=113.672743;//经度 var lat=34.766299;//纬度 var point = new BMap.Point(lng, lat); map.centerAndZoom(point, 14);
</script>
如果没有密钥可以去百度地图api官网注册一个密钥。
这样我们就实现好了一个以郑州为中心点(根据经纬度坐标),地图缩放比例是14的地图。
经纬度的获取可以通过下面百度提供的网站进行抓取:http://api.map.baidu.com/lbsapi/getpoint/index.html。
二、地图标志
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});// 定义 左上角,添加比例尺 var top_left_navigation = new BMap.NavigationControl(); // 定义 左上角,添加默认缩放平移控件 map.addControl(top_left_control);//添加 map.addControl(top_left_navigation);//添加
addControl的方法是添加图控件,例如:比例尺,缩放的滚轴等。关于地图上的控件可以查看百度api的示例,根据自己的需要进行添加,地址如下:http://lbsyun.baidu.com/jsdemo.htm#a1_2。
另外在项目中需要去掉百度左下角的logo及下面附属的文字,可对左下角样式进行定义去除:
.anchorBL { display: none; }
三、查找
查找的示例:
var local = new BMap.LocalSearch(map, { renderOptions: { map: map } }); local.search("景点");
关于查找我们可以详细看下LocalSearch这个类,其中查找的方法有search,searchInBounds,searchNearby这三个。
search(keyword: String | Array<String>, option: Object):根据检索词发起检索,当keyword为数组时将同时执行多关键字的查询,最多支持10个关键字。
searchInBounds(keyword: String | Array<String>, bounds: Bounds, option: Object):根据范围和检索词发起范围检索,当keyword为数组时将同时执行多关键字检索,最多支持10个关键字。(这个方法我用到的少,主要是因为bounds没时间研究)
searchNearby(keyword: String | Array<String>, center:LocalResultPoi| String | Point, radius: Number, option: Object):根据中心点、半径与检索词发起周边检索。当keyword为数组时将同时执行多关键字的检索,最多支持10个关键字。(这个方法再项目中用到的比较多,项目功能是实现楼盘周边配套施设的)。
对于LocalSearch中的renderOptions中还包含了一个回调函数onSearchComplete,在项目中的应用比较广泛:
可以这样定义:
onSearchComplete: function(results){ // 判断状态是否正确 if (local.getStatus() == BMAP_STATUS_SUCCESS) { //执行操作 } }
其中results表示的搜索到的结果集,像例子中就表示是郑州周边的景点的结果集。
results中常用到的属性和方法有:
results.getCurrentNumPois():表示获取当前页结果集所有的点。当页显示多少可以再renderOptions中定义,比如:pageCapacity: 20,表示显示20个。
results.getPoi(1).point.lng:获取结果集第一个点的经度。
results.getPoi(1).point.lat:获取结果集第一个点的纬度。
results.getPoi(1).point.title:获取结果集第一个点的名称。
results.getPoi(1).point.address:获取结果集第一个点的地址。
results.getPoi(1).point.phoneNumber:获取结果集第一个点的电话。
map.getDistance:可以根据经纬度计算两点间的距离,如果用的到可以拓展路线,打车等服务(详情参考:TaxiFare类)。
四、遮盖物
有的时候我们需要对地图上点进行标记等操作,这时候我们就需要对其添加遮盖物,比较常见的有圆形,矩形,三角形等不规则的简单遮盖层,这些百度地图给的例子中有详细介绍以及demo。这里我就说一说项目中用到的复杂自定义遮盖物。
实现思路是通过画图的方式,根据点的坐标,通过var pixel = map.pointToOverlayPixel(this._point);这句代码把坐标跟屏幕的像素进行转换,以得到遮盖物在屏幕上显示的横纵坐标,并赋值给left和top属性。
最后通过map.addOverlay(遮盖物对象)方法,添加遮盖物。清楚遮盖无是 map.clearOverlays()。
详情可以参考:http://lbsyun.baidu.com/jsdemo.htm#c1_11中的覆盖物示例中的添加自定义覆盖物,我是根据这个方法进行修改,实现了地图找房,楼盘周边交通示例等功能。
以上是我最近使用百度地图api的一些心得体会,第一次写博客,有什么不到位的,还请大牛们包含,欢迎指错。