vue 百度地图初始化加载

最近一直在做和百度地图有关的项目，把最近的心路历程和遇到的坑都记录一下，以便后期

继续和百度地图磕在一起。

1：账号注册

        进入百度地图开放平台官网，有账号的登录，没有账号的请注册。

2：AK秘钥申请

JavaScript API只支持浏览端的AK进行接入与访问，请开发者在申请AK时注意选择正确的AK类型。

• 进入百度地图开放平台官网控制台，点击【应用管理】-【我的应用】
• 点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问

3：在index.html页面中使用script标签，引入api地址即可，如下：

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

4：创建一个index.vue 页面对地图进行加载：

<template>
    <div
        id="container"
        style="width: 100%; height: 888px; position: absolute"
     ></div>
</template>
<script>
export default {
    data() {
        return {
             //地图
             map: "",
        }
    }
}
</<script>
<style lang="scss" scoped>
</style>

5：初始化加载地图信息：

 mounted() {
    this.initMap();
 },
    
 methods: {
    // 初始化加载地图
    initMap() {
      let _this = this;
      _this.map = new BMapGL.Map("container");
      var point = new BMapGL.Point(121.245049, 28.80429); //中心点位
      _this.map.centerAndZoom(point, 22);
      _this.map.setViewport(point);
      _this.map.disableDragging(false); //禁止拖动地图
      _this.map.disableDoubleClickZoom(false); //禁止鼠标双击放大
      _this.map.enableScrollWheelZoom(true);   //开启鼠标滚轮缩放
      _this.map.setDisplayOptions({
        poiText: false, // 隐藏poi标注
        poiIcon: false, // 隐藏poi图标
        building: false, // 隐藏楼块
      });
      
      //自定义地图背景图
      _this.map.setMapStyleV2({
        styleId: "nidezidingyiditubeijingtuyangshiid",
      });
    },
 }