申请百度地图

前言：我在测试一个项目，需要在地图上做一些小功能，比如标记点位啊

1. 登陆百度开放地图官网

2. 点击 开放文档 里面 的 javascriptAPI（因为我是web应用哈）

在里面开发指南那里，申请密钥

3. 填完基础信息，要去邮箱激活，

注意要在网页上登陆邮箱，手机上无法直接激活

4. 如何获取密钥

在 应用管理->我的应用->创建应用后，才会获取的AK（密钥）

密钥就在你创建的应用列表，“访问应用AK”就是

 

5. 创建应用需要注意

 

6. 使用这个AK测试一下

注意：要在打包的项目里进行测试（如vue 何 react 或 静态服务器下启动）

在vue项目的 public目录下的index.html中，引入外部js

<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥AK"></script>

之后在app.vue进行测试，代码如下

<template>
  <div>
    <div id="bMapGL-container"></div>
  </div>
</template>
<script>
//这个是避免语法检测，因为不加通不过，会报错：BMapGL is not undefined
/* eslint-disable */
export default {
  mounted() {
    this.init();
  },
  data() {
    return {};
  },
  methods: {
    init() {
      let map = new BMapGL.Map("bMapGL-container"); // 创建Map实例
      map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    },
  },
};
</script>
<style scoped>
body,
html,
#bMapGL-container {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "微软雅黑";
}
.info {
  z-index: 999;
  width: auto;
  min-width: 22rem;
  padding: 0.75rem 1.25rem;
  margin-left: 1.25rem;
  position: fixed;
  top: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  font-size: 14px;
  color: #666;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>

注意 /* eslint-disable */  它是避免语法检测的，不然会报错：BMapGL is not undefined