在vue项目中使用百度地图api，报错BMapGL is not defined

在vue项目中使用地图api，报错BMapGL is not defined

莫宛

6021人浏览 · 2022-08-02 14:36:59

莫宛 · 2022-08-02 14:36:59 发布

在vue项目中使用地图api，报错BMapGL is not defined。

检查元素时发现只引入了一个内容

成功引入时，检查元素会发现引入了三个内容

错误写法

// 报错写法：在created或beforeCreate中引入地图api。因为引入不成功，所以会报上面的错
  beforeCreate() {
    this.loadScript()
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var mp = new BMapGL.Map('mapBox'); 
      mp.centerAndZoom(new BMapGL.Point(121.491, 31.233), 11); 
    },
    loadScript() { 
      var script = document.createElement("script"); 
      script.type = 'text/javascript'
      script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥";
      document.head.appendChild(script); 
    }
  }

成功写法：

在public/index.html的head或body中引入地图api

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
  </head>
  <body>
    <div id="app"></div>
    
    <!--或 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">-->
  </body>
</html>

在vue中使用

<template>
  <div class="content-box">
    <div id="mapBox" class="map-box"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 在页面dom元素加载完成后，才可以通过BMapGL.Map('mapBox')加载地图
      var mp = new BMapGL.Map('mapBox'); 
      mp.centerAndZoom(new BMapGL.Point(121.491, 31.233), 11); 
    }
  }
}
</script>

<style lang="scss" scoped>
.map-box {
  width: 800px;
  height: 800px;
}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^