百度地图API
百度地图API应用实例
Michael Tian
资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。
目录
百度地图API. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2
1基础知识. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2
2应用示例. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
3折线. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
4自定义标注. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
5文本标注. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24
6参考资料. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
百度地图API
1基础知识
1 . 1百度地图API概念
百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您
资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。
在网站中构建功能丰富、 交互性强的地图应用程序。
百度地图API不但包含构建地图的基本功能接口,还提供了诸如本地搜索、路线规划等数据服务。
1 .2百度地图的”Hel lo,World”
开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创立了一个520x340大小的地图区域并以天安门作为地图的中心:
资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。
您能够查看此示例及下载、 编辑和调试该示例。
程序运行结果:
资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。
即使在此简单的示例中,也需要注意五点:
1 .使用script标签包含百度地图API JavaScript。
2. 创立名为”container”的div元素来包含地图。
3.编写JavaScript函数创立”map”对象。
4.将地图的中心设置为指定的地理点。
5. 在</html>标签外面开始初始化地图对象并确保container div元素已经存在。
资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。
1 .2. 1 引用百度地图API文件
经过地址:
其中参数key为密钥,您能够在这里申请密钥。参数v为当前API的版本号,当前最新版本为1 .0,services参数表示是否加载服务部分, true表示加载, false表示不加载。地址,例如当前API的最新版本为1 .0。
1 .2.2创立地图容器元素
<div style="width:520px;height:340px;border:1px sol id#000" id="Div1"></div>地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创立了一个div元素并制定它的大小。地图会根据容器大小调整自身尺寸。
1 .2.3命名空间
API使用BMap作为命名空间,所有类均在该命名空间之下,比如:
BMap.Map、 BMap.Control、 BMap.Overlay。
1 .2.4创立地图实例
资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。
位于BMap命名空间下的Map类表示地图,经过new操作符能够创立一个地图实例。其参数能够是元素id也能够是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。
请注意因为JavaScript是松散类型的语言,我们能够不填写构造函数的任何可选参数。
1 .2.5创立点坐标
这里我们使用BMap命名空间下的Point类来创立一个坐标点。 Point类描述了一个地理坐标点,其中1 16.404表示经度,39.915表示纬度。
1 .2.6初始化地图
资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。
在创立地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。
地图必须经过初始化才能够执行其它操作。
1 .2.7地图操作
地图被实例化并完成初始化以后,就能够与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、 滚轮缩放、 双击放大等交互功能。您也能够修改配置来改变这些功能。
您还能够经过编程的方式与地图交互。 Map类提供了若干修改地图状态的方法。例如:setCenter()、 panTo()、 zoomTo()等等。
下面示例显示一个地图,等待两秒钟后,它会移动到新中心点。 panTo()方法将让地图平滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。
资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。
本节完整参考代码:
2应用示例
本章节介绍一些地图的基本应用和部分AP I的使用。示例代码会结合ExtJS一起展示,因为ExtJ S不是本文主要介绍的技术,因此在这里不做过多的讲解,如果想了解详情,请”百度”ExtJS。
本文中所写的代码均为示例代码,不能保证程序的正常运行,如需完全代码,请参见每章节结束部分的”本节完整参考代码”。
本文不会详细介绍百度API类与Ext类的具体使用方法,如果需要了解,请参考相关的参考资料。
2. 1 Map类
此类是地图API的核心类,用来实例化一个地图。
RAKsmart发布了9月份优惠促销活动,从9月1日~9月30日期间,爆款美国服务器每日限量抢购最低$30.62-$46/月起,洛杉矶/圣何塞/香港/日本站群大量补货特价销售,美国1-10Gbps大带宽不限流量服务器低价热卖等。RAKsmart是一家华人运营的国外主机商,提供的产品包括独立服务器租用和VPS等,可选数据中心包括美国加州圣何塞、洛杉矶、中国香港、韩国、日本、荷兰等国家和地区数据中心(...
CloudCone 商家也是比较有特点的,和我们熟悉的DO、Vultr、Linode商家均是可以随时删除机器开通的小时计费模式。这个对于有需要短租服务器的来说是比较有性价比的。但是,他们还有一个缺点就是机房比较少,不同于上面几个小时计费服务商可以有多机房可选,如果有这个多机房方案的话,应该更有特点。这次我们可以看到CloudCone闪购活动提供洛杉矶三个促销方案,低至月付1.99美元。商家也可以随...
目前在标准互联这边有两台香港云服务器产品,这不看到有通知到期提醒才关注到。平时我还是很少去登录这个服务商的,这个服务商最近一年的促销信息比较少,这个和他们的运营策略有关系。已经从开始的倾向低价和个人用户云服务器市场,开始转型到中高端个人和企业用户的独立服务器。在这篇文章中,有看到标准互联有推出襄阳电信高防服务器100GB防御。有三款促销方案我们有需要可以看看。我们看看几款方案配置。型号内存硬盘IP...