展示地图 | 百度地图API SDK


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>BaiduMap</title>
<style type="text/css">
    html { height:100%; }
    body { height:100%; margin:0px; padding:0px; }
    #container { height:100%; }
</style>
</head>
<body>
</body>
</html>

2.引入百度地图API文件


<script type="text/javascript" src="https://api.map.baidu.com/api?v=4.0&ak=您的密钥"></script>

3.创建地图实例

首先创建地图实例，传入DOM中的id来初始化地图


// html中
<div id="container"></div>

// 引入上述API文件之后，JS中可以通过传入id创建地图
var map = new BMap.Map("container"); // 创建地图实例

4.设置地图的初始化视野

在初始化实例时，通过往第二个参数中传入一个Point坐标点和缩放级别来初始化视野中心和缩放级别，也可根据需要，额外传入视野旋转与倾斜的角度


var map = new BMap.Map("container", {
    center: new BMap.Point(116.404,39.915), // 创建点坐标作为中心点
    zoom: 11, // 设置地图级别
    heading: 90, // 设置地图的旋转角度
    tilt: 45, // 设置地图的倾斜角度
}); // 创建地图实例

至此我们完成了一个完整的地图展示的例子，可以试着在地图区域按住鼠标右键进行拖动，地图的视角和旋转角度会随之改变。

地图常用名词

地图交互与事件

本篇文章对您是否有帮助？