每一份HTML文档都应该声明正确的文档类型

1、申请百度账号和AK

点我申请

2、筹备页面

按照HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的切合HTML5规范的文档声明：

<!DOCTYPE html>

3、适应移动端页面展示

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

4、设置容器样式

设置容器样式巨细，使舆图充塞整个浏览器窗口：

5、引用百度舆图API文件

6、创建舆图容器元素

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

7、创建舆图实例

位于BMap定名空间下的Map类暗示舆图，通过new操纵符可以创建一个舆图实例。其参数可以是元素id也可以是元素东西。

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

8、设置中心点坐标

这里我们使用BMap定名空间下的Point类来创建一个坐标点。Point类描述了一个地舆坐标点，此中118.024381暗示经度，36.812327暗示纬度。（为山东省淄博市张店区区当局坐标）

var point = new BMap.Point(118.024381,36.812327);

请注意：在使用百度舆图JavaScript API处事时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换要领！！！

坐标转换

目前国内主要有以下三种坐标系：

WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

GCJ02：又称火星坐标系，是由中国国家测绘局制订的地舆信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。

BD09：为百度坐标系，在GCJ02坐标系根本上再次加密。此中bd09ll暗示百度经纬度坐标，bd09mc暗示百度墨卡托米制坐标。

非中国地区舆图，处事坐标统一使用WGS84坐标。

9、舆图初始化，同时设置舆图展示级别

在创建舆图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()要领要求设置中心点坐标和舆图级别。舆图必需颠末初始化才可以执行其他操纵。

map.centerAndZoom(point, 15);

*在舆图中使用鼠标滚轮控制缩放，需添加要领：

map.enableScrollWheelZoom(true);

10、舆图初始化

添加控件前，舆图需要进行初始化。例如，要将标准舆图控件添加到舆图中，可在代码中添加如下内容：

var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl());

11、添加多个控件：

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

map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("北京"); // 仅当设置都市信息时，MapTypeControl的切换成果才华可用

12、控制控件位置

anchor值 位置说明
BMAP_ANCHOR_TOP_LEFT 暗示控件定位于舆图的左上角
BMAP_ANCHOR_TOP_RIGHT 暗示控件定位于舆图的右上角
BMAP_ANCHOR_BOTTOM_LEFT 暗示控件定位于舆图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT 暗示控件定位于舆图的右下角

13、控件位置偏移

秒客网

每一份HTML文档都应该声明正确的文档类型

相关文章