前端vue项目中使用百度地图

封装一个map.js的组件，如下所示

export function loadBMap() {
    return new Promise(function(resolve, reject) {
        if (typeof BMap !== 'undefined') {
            resolve(BMap)
            return true
        }
        window.onBMapCallback = function() {
            resolve(BMap)
        }
        // 使用https协议需要添加一下meta标签
        var protocolStr = document.location.protocol;  
        if(protocolStr == "https:")  
        {  
            let meta = document.createElement('meta')
            meta.httpEquiv = 'Content-Security-Policy'
            meta.content ='upgrade-insecure-requests'
            meta.onerror = reject
            document.head.appendChild(meta)
        }       
        // 引入百度地图
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src =
            'http://api.map.baidu.com/api?v=2.0&ak='+ process.env.VUE_APP_BAI_DU_AK +'&__ec_v__=20190126&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
    })
}

在页面中定义

import { loadBMap } from "@/utils/map.js";

 <el-form-item label="设备经度" prop="longitude">
                <el-input
                  v-model="form.longitude"
                  placeholder="请输入设备经度"
                  type="number"
                  :disabled="form.locationWay != 3"
                >
                  <el-link
                    slot="append"
                    :underline="false"
                    href="https://api.map.baidu.com/lbsapi/getpoint/index.html"
                    target="_blank"
                    :disabled="form.locationWay != 3"
                    >坐标拾取</el-link
                  >
                </el-input>
              </el-form-item>  


/**加载地图*/
    loadMap() {
      this.$nextTick(() => {
        loadBMap().then(() => {
          this.getmap();
        });
      });
    },


 // 地图定位
    getmap() {
      this.map = new BMap.Map("map");
      let point = null;
      if (
        this.form.longitude != null &&
        this.form.longitude != "" &&
        this.form.latitude != null &&
        this.form.latitude != ""
      ) {
        point = new BMap.Point(this.form.longitude, this.form.latitude);
      } else {
        point = new BMap.Point(116.404, 39.915);
      }
      this.map.centerAndZoom(point, 19);
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      this.map.addControl(new BMap.NavigationControl());

      // 标注设备位置
      this.mk = new BMap.Marker(point);
      this.map.addOverlay(this.mk);
      this.map.panTo(point);
    },

地图展示

   <div id="map" style="height: 435px; width: 100%">
                  地图展示区域，新增后显示
                </div>