#官方说明
http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show
#csdn博友
https://blog.csdn.net/weixin_45846357/article/details/105477838
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>zan-admin</title>
<script src="static/js/checkie&edge.js"></script>
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/zan-admin.min.css" rel="stylesheet">
<style>
#baidumap {
height: 300px;
}
</style>
</head>
<body>
<header class="zan-header">
<span class="glyphicon glyphicon-menu-hamburger zan-sidebar-toggle" aria-hidden="true"></span>
<div class="zan-header-center">
<div class="zan-nav-item"><a href="index.html">首页</a></div>
<div class="zan-nav-item"><a href="platform.html">平台</a></div>
<div class="zan-nav-item"><a href="#">商城</a></div>
<div class="zan-nav-item"><a href="#">运营</a></div>
<div class="zan-nav-item"><a href="#">百度</a></div>
<div class="zan-nav-item"><a href="#">谷歌</a></div>
<div class="zan-nav-item"><a href="#">天猫</a></div>
<div class="zan-nav-item"><a href="#">淘宝</a></div>
<div class="zan-nav-item"><a href="#">京东</a></div>
</div>
<div class="zan-avatar-wrap">
<div class="dropdown">
<img class="zan-avatar" data-toggle="dropdown" src="static/images/avatar.jpg" alt="头像">
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">admin</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">超级管理员</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">通知 <span class="badge">10</span></a></li>
<li><a href="#">个人资料</a></li>
<li><a href="#">修改密码</a></li>
<li><a href="#">清空缓存</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">退出登录</a></li>
</ul>
</div>
</div>
</header>
<aside class="zan-aside">
<div class="zan-brand">
<a href="index.html">zan-admin后台管理系统</a>
</div>
<ul class="zan-sidebar">
<li>
<a href="index.html">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>后台首页
</a>
</li>
<li>
<a href="fonticon.html">
<span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>字体图标
</a>
</li>
<li class="haschildren">
<a href="#">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>日期选择器
</a>
<ul class="zan-submenu">
<li><a href="plug_flatpickr.html">flatpickr</a></li>
<li><a href="plug_datetimepicker.html">datetimepicker</a></li>
</ul>
</li>
<li class="haschildren">
<a href="#">
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span>文件上传
</a>
<ul class="zan-submenu">
<li><a href="plug_fileupload.html">fileupload</a></li>
<li><a href="plug_webuploader.html">webuploader</a></li>
</ul>
</li>
<li class="haschildren">
<a href="#">
<span class="glyphicon glyphicon-stats" aria-hidden="true"></span>图表插件
</a>
<ul class="zan-submenu">
<li><a href="plug_chart.html">chart</a></li>
<li><a href="plug_echarts.html">echarts</a></li>
</ul>
</li>
<li class="haschildren">
<a href="#">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>富文本
</a>
<ul class="zan-submenu">
<li><a href="plug_tinymce.html">tinymce</a></li>
<li><a href="plug_editor.md.html">editor.md</a></li>
<li><a href="plug_ueditor.md.html">ueditor</a></li>
</ul>
</li>
<li class="haschildren">
<a href="#">
<span class="glyphicon glyphicon-saved" aria-hidden="true"></span>表单验证
</a>
<ul class="zan-submenu">
<li><a href="plug_formvalidation.html">formvalidation</a></li>
<li><a href="plug_jquery.validation.html">jquery.validation</a></li>
</ul>
</li>
<li class="haschildren">
<a href="#">
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>地图插件
</a>
<ul class="zan-submenu">
<li><a href="plug_lbsbaidu.html">百度地图</a></li>
</ul>
</li>
<li class="haschildren">
<a href="#">
<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>其它插件
</a>
<ul class="zan-submenu">
<li><a href="plug_sweetalert.html">sweetalert</a></li>
<li><a href="plug_notify.html">notify</a></li>
<li><a href="plug_timeline.html">timeline</a></li>
<li><a href="plug_clipboard.html">clipboard</a></li>
<li><a href="plug_croppie.html">croppie</a></li>
<li><a href="plug_lightbox.html">lightbox</a></li>
<li><a href="plug_touchslider.html">touchslider</a></li>
<li><a href="plug_rocket.html">rocket</a></li>
</ul>
</li>
<li class="haschildren">
<a href="#">
<span class="glyphicon glyphicon-file" aria-hidden="true"></span>示例页面
</a>
<ul class="zan-submenu">
<li><a href="page_login.html" target="_blank">登录页面</a></li>
<li><a href="page_curd.html">CURD页面</a></li>
<li><a href="page_password.html">修改密码</a></li>
<li><a href="page_error.html" target="_blank">错误页面</a></li>
</ul>
</li>
</ul>
</aside>
<!-- 面包屑导航 -->
<div class="zan-breadcrumb">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
</div>
<main class="zan-main">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div id="baidumap"></div>
</div>
</div>
</div>
</main>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/zan-admin.min.js"></script>
<!-- 插件依赖 -->
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=QLnury6Qqs17img1SncCzIrQtzvhI7XB"></script>
<script>
var map = new BMapGL.Map("baidumap"); // 创建地图实例
var point = new BMapGL.Point(118.14621, 24.51253); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
</script>
</body>
</html>
高德地图官方教程
https://lbs.amap.com/api/javascript-api/guide/abc/quickstart