http://lbsyun.baidu.com/index.php?title
=jspopularGL/guide/show
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
>
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
