logo

开发者热搜

课程 | 地图可视化教学之『零基础打造你的专属地图』

作者：百度地图开放平台2021.07.22 11:59浏览量：1226

简介：地图可视化教学之『零基础打造你的专属地图』

百度地图可视化服务可满足开发者对于海量位置数据可视化展示的需求，开发者可关联自己的业务数据，并基于地图开放服务能力使用丰富的可视化功能，获得高性能、华丽的位置数据展示效果。为了提升开发者的接入体验，解答开发者的技术疑问，百度地图开放平台打造了全新的专题课程“地图可视化教学”，手把手教会开发者使用地图可视化服务。

本节教学主要介绍如何使用JS API展示地图并叠加路况图层，打造个人或业务专属地图。

前言：如何成为开发者，申请AK，配置权限
步骤一：注册百度账号
步骤二：点击https://lbsyun.baidu.com/ ，从开放平台官网进入控制台，应用管理-我的应用-选择应用类型为浏览器端
步骤三：启用服务勾选—配置referer—lbs.baidu.com,lbsyun.baidu.com
步骤四：点击提交-生成AK

STEP1：底图的引入
1、编写HTML页面的基础代码。
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>地图展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
</body>
</html>

2、引入百度地图API文件。

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

3、在HTML页面中添加一个div元素来作为地图容器，注意要设置一个id奥，后面初始化地图实例时会用到该id。地图需要一个HTML元素作为容器，这样才能展现到页面上，这里我们创建了一个div元素。

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

配置容器样式
<style>
body,
html,

#container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "微软雅黑";
}
</style>

4、初始化地图逻辑：通过BMapGL.Map来创建一个地图实例，这里使用到前面HTML地图容器里定义的id作为参数，然后通过centerAndZoom来设置显示地图的中心点和缩放级别，注意不使用centerAndZoom的话，地图不能呈现奥。
var map = new BMapGL.Map(“container”); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

5、开启鼠标滚轮缩放：地图的鼠标滚轮缩放默认是关闭的，需要配置开启。
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

6、设置地图的旋转角度和倾斜角度：地图可以自定义旋转角度和倾斜角角度。
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度

STEP2：路况图层叠加
1、路况事件控制按钮添加。
路况控制事件按钮添加
<ul class="btn-wrap" style="z-index: 99;">
<li class = "btn" onclick = "addRouteType()">叠加路况</li>
<li class = "btn" onclick = "removeRouteType()">删除路况</li>
</ul>

2、事件控制按钮样式设置。
按钮CSS样式设置
ul li {
list-style: none;
}
.btn-wrap {
z-index: 999;
position: fixed;
bottom: 3.5rem;
margin-left: 3rem;
padding: 1rem 1rem;
border-radius: .25rem;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
.btn {
width: 75px;
height: 30px;
float: left;
background-color: #fff;
color: rgba(27, 142, 236, 1);
font-size: 14px;
border:1px solid rgba(27, 142, 236, 1);
border-radius: 5px;
margin: 0 5px;
text-align: center;
line-height: 30px;
}
.btn:hover {
background-color: rgba(27, 142, 236, 0.8);
color: #fff;
}

3、叠加/删除路况图层。
叠加/删除路况图层
function addRouteType() {
map.setTrafficOn(); // 叠加路况图层
}
function removeRouteType() {
map.setTrafficOff(); // 关闭路况图层
}

相关文章推荐

发表评论

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数

最热文章