注册账号
认证信息:个人认证和企业认证,根据自己的需要按照流程填写认证信息
创建ak
ak是个人秘钥
在 控制台 -> 应用管理 -> 我的应用 点击 创建应用 填写相关申请信息:
创建后
项目中使用
1.在index.html中引用
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=替换为自己的ak"></script>
把不要忘记替换自己的ak
2.根据官方文档引入项目
jspopularGL | 百度地图API SDKguidehttps://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld
index.html使用步骤
demo
<!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="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空间为BMapGL
// 按住鼠标右键,修改倾斜角和角度
var map = new BMapGL.Map("allmap"); // 创建Map实例
/* map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
*/
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>
成果展示
补充 vue-baidu-map中文文档地址:Vue Baidu Maphttps://dafrok.github.io/vue-baidu-map/#/zh/start/installation