最近项目中在使用百度地图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:;
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的一些心得体会,第一次写博客,有什么不到位的,还请大牛们包含,欢迎指错。

百度api使用心得体会的更多相关文章

  1. 百度OCR文字识别API使用心得===com.baidu.ocr.sdk.exception.SDKError[283604]

    异常com.baidu.ocr.sdk.exception.SDKError[283604]App identifier unmatch.错误的packname或bundleId.logId::303 ...

  2. 十天来学习java的心得体会

    有关学习java是几天来的心得体会: 十天学习java遇到很多问题,每个问题都是经过反复的看书本以及上网查找资料来解决的,发现这一点真的需要自己来而不是去遇到什么问题就去依靠他人(师兄.同学).在其中 ...

  3. Git的基本使用方法和安装&心得体会

    1. git的安装和github的注册.代码托管.创建organization.邀请member. (1)git的安装 因为我电脑是windows系统,所以下载的是git for windows.在官 ...

  4. 做小Leader的心得体会

    只是自己的工作心得体会,代码属于也不够专业,大家不喜勿喷. 8月份来到这家新公司,没过一个月给派了个活:带着两个小弟给某银行开发一个小工具.功能很简单,就是用Java做一个windows上的C端工具, ...

  5. 百度API ; 很多有用的接口及公用 数据

    百度API : http://apistore.baidu.com/ . 比如手机号码:

  6. 关于Solr的使用总结的心得体会

    摘要:在项目中使用Solr作为搜索引擎对大数据量创建索引,提供服务,本文是作者对Solr的使用总结的一点心得体会, 具体包括使用DataImportHandler从数据库中近实时同步数据.测试Solr ...

  7. 去百度API的百度地图准确叠加和坐标转换的解决方案研究

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百 ...

  8. 利用百度API Store接口进行火车票查询

    火车票查询 项目源码下载链接: Github:https://github.com/VincentWYJ/TrainTicketQuery 博客文件:http://files.cnblogs.com/ ...

  9. 百度api短信开发

    公司原来有一个短信发送的功能,是调用第三方的,但是很不稳定,时不时就收不到短信,但是钱已经扣了.对于这样的事,谁都忍受不了的.于是想找一个稳定短信发送平台,第一想到的是阿里云,百度.在这两个平台上公司 ...

随机推荐

  1. html标签大全(2)

    http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...

  2. Bootstrap入门(十一)组件5:输入框组

    Bootstrap入门(十一)组件5:输入框组   1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...

  3. 对lua中_ENV表的理解(lua5.2版本以后)

    当我拿到_ENV表的时候,会去想这个_ENV表是干什么用的? 首先看如下代码: print(_ENV) --0x1d005f0 print(_G) --0x1d005f0 ViewCode 看了上面的 ...

  4. ssh配置文件及问题解决

    一 ssh的配置文鉴模板 Host AAA User gitolite3 HostName IP地址 IdentityFile ~/.ssh/key 二 下载代码的方法 1 ssh git2 git ...

  5. [html5] 学习笔记-响应式布局

    1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...

  6. linux gdb基本概念

    GDB是一个功能强大的调试器,它是一个自由软件,能够用在许多UNIX平台上.它同时也是Linux系统中的默认调试器.GDB已被移植到许多其他的计算机平台上,并且能够用于调试嵌入式实时系统.一般来说,G ...

  7. C++STL笔记

    C++STL 1.vector 向量,长度可变的数组 头文件 #include<vector> 1.1vector的定义 vector<typename> name; 例如: ...

  8. 简述public private protected internal修饰符的访问权限

    public 关键字是类型和类型成员的访问修饰符.公共访问是允许的最高访问级别.对访问公共成员没有限制. protected 关键字是一个成员访问修饰符.受保护成员在它的类中可访问并且可由派生类访问. ...

  9. MySQL架构由小变大的演变过程

    假设一个网站(discuz)从最开始访问量很小做到日pv千万,我们来推测一下它的mysql服务器架构演变过程. 第一阶段网站访问量日pv量级在1w以下.单台机器跑web和db,不需要做架构层调优(比如 ...

  10. 普通用户创建ssh无密码访问

    jenkins:120.145.120.76 ubuntu:kasumi msc1:10.25.164.100 ubuntu:kasumi 1.创建普通用户&修改密码: $useradd ub ...