百度地图API的使用方法

全文 : http://www.cnblogs.com/xuhongfei/archive/2013/04/10/3011964.html

引用百度地图API文件

当您引用地图API文件时,需要使用自己申请的API密钥。

1. <script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script>

创建地图容器元素

1. <div style="width:520px;height:340px;border:1px solid #000" id="container"></div>

<div style="width:520px;height:340px;border:1px solid #000" id="container"></div>

地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素并制定它的大小。地图会根据容器大小调整自身尺寸。

命名空间

API使用BMap作为命名空间,所有类均在该命名空间之下,比如:BMap.Map、BMap.Control、BMap.Overlay。

创建地图实例

1. var map = new BMap.Map("container");

var map = new BMap.Map("container");

位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
注意在调用此构造函数时应确保容器元素已经添加到地图上。

创建点坐标

1. var point = new BMap.Point(116.404, 39.915);

var point = new BMap.Point(116.404, 39.915);

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。

地图初始化

1. map.centerAndZoom(point,15);

map.centerAndZoom(point,15);

在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。
地图必须经过初始化才可以执行其他操作。

地图操作

地图被实例化并完成初始化以后,就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。

您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如:setCenter()、panTo()、zoomTo()等等。

下面示例显示一个地图,等待两秒钟后,它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。

1. var map = new BMap.Map("container");

2. var point = new BMap.Point(116.404, 39.915);

3. map.centerAndZoom(point, 15);

4. window.setTimeout(function(){

5.  map.panTo(new BMap.Point(116.409, 39.918));

6. }, 2000);

var map = new BMap.Map("container");

var point = new BMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

window.setTimeout(function(){

map.panTo(new BMap.Point(116.409, 39.918));

}, 2000);

时间: 2024-11-11 09:12:18

百度地图API的使用方法的相关文章

HTML5结合百度地图API创建地图应用

具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid;} </style> <script src="http://api.map.baidu.com/api?v=1.3"></script> <script> window.onload = function(){ var oInput =

百度地图api的介绍和使用

1. 什么是百度地图api? 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,我们想使用百度地图的一些内部程序能够为我们提供很大的便利,他里面包括javascriptAPI,Web服务API.Android SDK.iOS SDK.定位SDK.车联网API.LBS云等多种开发工具与服务,提供基本地图展现.搜索.定位.逆/地理编码.路线规划.LBS云存储与检索等功能,适用于PC端.移动端.服务器等多种设备,多种操作系统下的地图应用开发.百度地图JavaScript API是一套由

百度地图API获得详细地名的方法

之前一直苦恼的一个问题就是当使用百度地图API进行反地理编码搜索的时候,最终得到的result只包含"枯燥"的省市区街道等信息,用于对客户的信息提示来说,这种"XX省XX市XX区XX路XX号"格式的信息往往不能给客户直观的概念,无法满足客户需求.反观百度地图.快的打车等LBS应用,它们可以为用户提供详细的地名等信息,让客户一目了然,它们是怎么做到的呢? 于是在查看了百度地图的文档的时候发现了ReverseGeoCoderResult类中的getPoiList方法,该

从百度地图API中抠出来的一个js方法,计算百度地图坐标距离

从百度地图api(http://developer.baidu.com/map/jsdemo.htm#a6_1)中抠出来的一个js方法,计算百度地图坐标距离 可读行还没还原,能用就行~ function fD(a, b, c) { for (; a > c;) a -= c - b; for (; a < b;) a += c - b; return a; }; function jD(a, b, c) { b != null && (a = Math.max(a, b));

【百度地图API】当地址解析失败时,如何调用search方法查找地址

原文:[百度地图API]当地址解析失败时,如何调用search方法查找地址 有个朋友问我,当地址解析失败时,应该如何处理呢?比如,他想搜索“南宁市青秀区”. ----------------------------------------------------------------------------- 首先,我们需要弄明白,地址解析的原理: 使用Geocoder进行地址解析,比如“北京市海淀区上地10街”,当系统匹配到这个地址时,getPoint就会返回一个坐标点.这里需要用到回调函数

【百度地图API】手机浏览器抓包工具及其使用方法

原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. ------------------------------------------------------ 一.手机浏览器抓包工具 Paros 3.2.13 二.如何配置 1.将电脑和手机连到同一个wifi环境中 2.找到电脑的IP 可以点击网卡图标,找到IP信息 也可以在cmd下,使用ipconfi

Android应用中使用百度地图API定位自己的位置(二)

官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发者们提供了如下类型的地图覆盖物: 我的位置图层(MyLocationOverlay):用于显示用户当前位置的图层(支持自定义位置图标): Poi搜索结果图层(PoiOverlay):用于显示兴趣点搜索结果的图层: 路线图层(RouteOverlay):公交.步行和驾车线路图层,将公交.步行和驾车出行方案的路线及关键点显示在地图上(起.终

数据视化Echarts+百度地图API实现市县区级下钻

开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是很详细,对于刚接触Echarts的让人来说可能有些搞不明白,在这里我把Echarts下钻开发过程中总结的知识分享给大家,也能使自己加深印象,当然啦,对于一些在软件行业折腾了几年的老油条来说,这些都是一些非常基础的东西.但是还是希望能帮助到那些刚接触Echarts遇到类似问题需要帮助的人.如果哪里写的

百度地图API

本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章.1.打开链接http://developer.baidu.com/map/jshome.htm  这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开源的地图API都是JS脚本写的,所以我上面的链接就只针对JAVASCRIPT进行介绍.  即使是编程菜鸟(像我这种),也知道当你在任何一个开发环境下写代码时,都需要加入头文件,例如,你要在C++里使用c