控件[最新]2013年最新百度map开辟指南

百度map 时间:2021-02-25 阅读:()

简介

什么是百度地图API

百度地图API是一套由JavaScript语言编写的应用程序接口它能够帮助您在网站中构建功能丰富、交互性强的地图应用。百度地图API包含了构建地图基本功能的各种接口提供了诸如本地搜索、路线规划等数据服务。

面向的读者

API是提供给那些具有一定JavaScript编程经验和了解面向对象概念的读者使用。此外读者还应该对地图产品有一定的了解。

您在使用中遇到任何问题都可以通过API贴吧或交流群反馈给我们。

获取API

地图API是由JavaScript语言编写的您在使用之前需要通过<script>标签将API引用到页面中<script src="http://api.map.baidu.com/api?v=1 .2"type="text/javascript"></script>

其中参数v为API当前的版本号 目前最新版本为1 2。在1 2版本之前您还可以设置services参数 以告知API是否加载服务部分 true表示加载 false表示不加载默认为true。

开发移动平台上的地图应用

API自1 1版本起开始支持iPhone、Android这样的移动平台。用户通过手机浏览器就可以访问由地图API创建出来的应用。移动平台的屏幕尺寸通常比PC或笔记本要小操作方式也有所不同。为了更好的在手机浏览器上展示地图我们有如下建议

 将地图容器高设置为100%使其充满整个屏幕或者您也可以计算浏览器窗口的大小并进行设置。

 添加下面的meta标签 <meta name="viewport"content="initial-scale=1 0,user-scalable=no"/>

这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。

您可以参考Apple's Developer documentation和Android documentation获得更多信息。

异步加载

API 1 1和1 2版本支持异步加载您可以在引用脚本的时候添加cal lback参数当脚本加载完成后cal lback函数会被立刻调用。请参考下面的使用示例

<!DOCTYPE html>

<html>

<head>

}function loadScript( ) {var script = document.createElement("script") ;script.src = "http: //api.map.baidu.com/api?v=1.2&callback=initialize";document.body.appendChild(script) ;

}window.onload = loadScript;

</script>

</head>

<body>

</body>

</html>

兼容性

浏览器 IE 60+、 Firefox36+、 Opera 90+、 Safari 30+、 Chrome

操作系统Windows、 Mac、 Linux

移动平台 iPhone、Android

版本说明

地址http://api map baidu com/api?v=1 2中的参数v表示您加载API的版本例如当前API的最新版本为1 2则您可在地址中添加v=1 2。当API升级后如果已有接口在使用、命名等方面发生了变化我们会为其增加一个新的版本号这不会对您现有的应用造成任何影响。如果升级只是修复一些bug或者在不影响现有功能的前提下增加接口、改善性能则版本号不会发生变化。您可以在更新日志页面查看版本的变化。

问题解答

如果您在使用百度地图API中遇到问题请尝试通过以下途径解决

 确认您使用了正确的地图API地址。

 访问百度地图API吧查找相关问题的帖子或者将您的问题发布到贴吧中。

基础知识

百度地图的“He l lo,World”

开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个地图并以天安门作为地图的中心

<!DOCTYPE html>

<html>

<head>

#container{height:100%}

</style>

</head>

<body>

</script>

</body>

</html>

下面我们分步向您介绍

准备页面

根据HTML标准每一份HTML文档都应该声明正确的文档类型我们建议您使用最新的符合HTML5规范的文档声明

您也可以根据需要选择其他类型的文档声明这样浏览器会以标准的方式对页面进行渲染保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。

下面我们添加一个m eta标签 以便使您的页面更好的在移动平台上展示。

#container{height:100%}

</style>

引用百度地图API文件

创建地图容器元素

地图需要一个HTML元素作为容器这样才能展现到页面上。这里我们创建了一个div元素。

命名空间

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

创建地图实例var map = new BMap.Map("container") ;

位于B Ma p命名空间下的Ma p类表示地图通过n ew操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

注意在调用此构造函数时应确保容器元素已经添加到地图上。

创建点坐标var point = new BMap.Point(116. 404, 39.915) ;

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

地图初始化

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

地图配置与操作

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

这些功能。比如默认情况下地图不支持鼠标滚轮缩放操作 因为这样可能会影响整个页面的用户体验但是如果您希望在地图中使用鼠标滚轮控制缩放则可以调用map enableScrol lWheelZoom方法来开启。配置选项可以在Ma p类参考的配置方法一节中找到。

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

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

控件

地图控件概述

百度地图上负责与地图交互的U I元素称为控件。百度地图API中提供了丰富的控件您还可以通过Control类来实现自定义控件。

地图API中提供的控件有

Co ntro l 控件的抽象基类所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。NavigationControl 地图平移缩放控件默认位于地图左上方它包含控制地图的平移和缩放的功能。OverviewMapControl 缩略地图控件默认位于地图右下方是一个可折叠的缩略地图。

Sca l eCo ntro l  比例尺控件默认位于地图左下方显示地图的比例关系。

Ma pTyp e C o n tro l 地图类型控件默认位于地图右上方。

CopyrightControl 版权控件默认位于地图左下方。

向地图添加控件

可以使用Map addControl()方法向地图添加控件。在此之前地图需要进行初始化。例如要将标准地图控件添加到地图中可在代码中添加如下内容

可以向地图添加多个控件。在本例中我们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。在地图中添加控件后它们即刻生效。

控制控件位置

初始化控件时可提供一个可选参数其中的anchor和offset属性共同控制控件在地图上的位置。

控件停靠位置anchor表示控件的停靠位置即控件停靠在地图的哪个角。当地图尺寸发生变化时控件会根据停靠位置的不同来调整自己的位置。 anchor允许的值为

BMAP_ANCHOR_TOP_LEFT表示控件定位于地图的左上角。

BMAP_ANCHOR_TOP_RIGHT表示控件定位于地图的右上角。

BMAP_ANCHOR_BOTTOM_LEFT表示控件定位于地图的左下角。

BMAP_ANCHOR_BOTTOM_RIGHT表示控件定位于地图的右下角。

控件位置偏移

除了指定停靠位置外还可以通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同那么控件可能会重叠在一起这时就可以通过偏移值使二者分开显示。

本示例将比例尺放置在地图的左下角 由于API默认会有版权信息 因此需要添加一些偏移值以防止控件重叠。

修改控件配置

地图API的控件提供了丰富的配置参数您可参考API文档来修改它们以便得到符合要求的控件外观。例如 NavigationControl控件就提供了如下类型

BMAP_NAVIGATION_CONTROL_LARGE表示显示完整的平移缩放控件。

BMAP_NAVIGATION_CONTROL_SMALL表示显示小型的平移缩放控件。

BMAP_NAVIGATION_CONTROL_PAN表示只显示控件的平移部分功能。

BMAP_NAVIGATION_CONTROL_ZOOM表示只显示控件的缩放部分功能。

下图从左向右依次展示了上述不同类型的控件外观

下面的示例将调整平移缩放地图控件的外观。

自定义控件

百度地图AP I允许您通过继承Co ntro l来创建自定义地图控件。

要创建可用的自定义控件您需要做以下工作

定义一个自定义控件的构造函数。

设置自定义控件构造函数的p rototyp e属性为C o n tro l的实例以便继承控件基类。

实现initial ize()方法并提供defaultAnchor和defaultOffset属性。

定义构造函数并继承Control

首先您需要定义自定义控件的构造函数并在构造函数中提供defaultAnchor和defaultOffset两个属性以便AP I正确定位控件位置接着让其继承于Co ntro l 。在下面的示例中我们定义一个名为Zoom Contro l的控件每一次点击将地图放大两个级别。它具有文本标识而不是平移缩放控件中使用的图形图标。

展开全文