创建地图之地图展示
官方demo示例和讲解——直戳这里
官方其实讲的很详细的,如果还是不懂为什么要这么写,我建议边看代码,边参考官方的JavaScript API v2.0相关类的说明,这会对解读代码有很大的帮助。
基本步骤
编写HTML页面的基础代码引入百度地图的API文件初始化地图逻辑开启鼠标滚轮缩放(通过修改Map类的配置来实现交互功能)
<!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>
<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>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398, 39.897445);
map.centerAndZoom(point, 12);
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)以指定的经度和纬度创建一个地理点坐标
看图说话: