创建地图之地图展示
官方其实讲的很详细的,如果还是不懂为什么要这么写,我建议边看代码,边参考官方的JavaScript API v2.0相关类的说明,这会对解读代码有很大的帮助。
基本步骤
- 编写HTML页面的基础代码
- 引入百度地图的
API
文件 - 初始化地图逻辑
- 开启鼠标滚轮缩放(通过修改
Map类的配置
来实现交互功能)
<!-- 1.编写HTML页面的基础代码 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<!-- 2.引入百度地图API文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3ecea51f560650b1ed8a4b99808f52e8"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<!-- 3.初始化地图逻辑 -->
<!-- 逻辑:首先创建地图实例,之后用一个Point坐标点和缩放级别来初始化地图。 -->
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建地图实例
var point = new BMap.Point(116.331398, 39.897445); //创建点坐标(以指定的经度和纬度创建一个地理点坐标)
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
/* 4.开启鼠标滚轮缩放*/
// 地图的鼠标滚轮缩放默认是关闭的,需要配置开启。
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
<!-- 至此,我们完成了一个更加完整的地图展示的例子。 -->
效果图展示
涉及到的知识点
核心类 —— Map(点击查看)
Map
类是地图API
的核心类,用来实例化一个地图。
构造函数 | 描述 |
---|---|
Map(container: String 或 HTMLElement, opts: MapOptions[可选参数]) | 在指定的容器内创建地图实例,之后需要调用Map.centerAndZoom() 方法对地图进行初始化。未进行初始化的地图将不能进行任何操作 。 |
看图说话:
核心类 —— MapOptions(点击查看)
此类表示Map
构造函数的可选参数
。它没有构造函数
,但可通过对象字面量形式表示
。
对象字面量的表示形式:
{key1:value1,key2:value2,key3:value3,...}
//根据MapOptions类中的属性,可以自定义核心Map类的构造函数中的第二个可选参数opts。
{minZoom:3,maxZoom:19,mapType:BMAP_NORMAL_MAP}
//实际使用:
var map = new BMap.Map("allmap",{minZoom:3,maxZoom:19,mapType:BMAP_NORMAL_MAP});
看图说话:
核心类 —— Point(点击查看)
此类表示一个地理坐标点
。
构造函数 | 描述 |
---|---|
Point(lng: Number, lat: Number) | 以指定的经度和纬度 创建一个地理点坐标 |
看图说话: