Bmap未定义,怎么会出现这个错误

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Bmap未定义,怎么会出现这个错误相关的知识,希望对你有一定的参考价值。

BMap未定义,你先看看你的大小写没搞错不
另外,如果你是引入的外部js的话,记得把百度api的js放前面!

推荐使用异步加载百度地图的js,这样能保证BMap是定义了的~~~~

最后,你的js没有用()();这个东东给封装起来吧,偶尔也会出现这个问题的说……
参考技术A 使用的api是<script type="text/javascript" src="api.map.baidu.com/api?v=1.2"></script>,单独一个页面正常。使用ajax调用该页面后报错ReferenceError: BMap is not defined。
使用:<load href ="__PUBLIC__/Js/jquery-1.9.1.js" />
将ajax页面的地图api放到主页面调用,正常。

解决vue中BMap未定义问题

原文链接: 点我

最近在项目中使用了百度地图来显示物流信息,实现方式有两种:

引用Vue Baidu Map
引用BMap
存在的问题:color{red}{存在的问题:}存在的问题:;
使用BMap可以修改起始点和终点的图标,但是地图需要刷新页面才会显示。
针对以上问题,问题的实现如下所示:

Vue文件中的代码

<template>
	<div id="myMap"></div>
</template>
import qs from "qs";
export default {
  mounted() {
    this.getMap();
  },
  methods: {
    // 绘制地图
    getMap() {
      var map = new BMap.Map("myMap");
      map.enableScrollWheelZoom(true);
	 //注意:下面的坐标值换为自己的动态值即可,我就不多说了
      var start = new BMap.Point(this.startLng, this.startLat);
      var end = new BMap.Point(this.currentLng, this.currentLat);
      var p1 = new BMap.Point(this.currentLng, this.currentLat);
      //自定义图标
      var startIcon = new BMap.Icon(
        require("../../assets/images/point.png"),  //起点图片
        new BMap.Size(25, 25)
      );
      var currentIcon = new BMap.Icon(
        require("../../assets/images/car.png"),   //物流车图片
        new BMap.Size(25, 25)
      );
      var endIcon = new BMap.Icon(
        require("../../assets/images/point.png"),   //终点图片
        new BMap.Size(25, 25)
      );
      var driving = new BMap.DrivingRoute(map, {
        renderOptions: { map: map, autoViewport: true },
        onMarkersSet: function(routes) {
          //标注点完成回调
          map.clearOverlays(); //删除点
          var myStart = new BMap.Marker(start, { icon: startIcon });
          map.addOverlay(myStart);
          var myEnd = new BMap.Marker(end, { icon: endIcon });
          map.addOverlay(myEnd);
          var myP1 = new BMap.Marker(p1, { icon: currentIcon });
          map.addOverlay(myP1);
        }
      });
      driving.search(start, end, { waypoints: [p1] });
    },
};
</script>

  

  • 这样写之后浏览器会报BMap is undefined,解决方法如下:

  • 在项目根目录下建立Js文件(比如:map.js)

    export function MP(ak) {  
    return new Promise(function (resolve, reject) {
      window.onload = function () {
        resolve(BMap)  
      }  
      var script = document.createElement("script");
      script.type = "text/javascript";  
      script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
      script.onerror = reject;  
      document.head.appendChild(script);  
    })  
    } 
    

    在App.vue中

  • <script>
    import { MP } from ‘./map‘    //引入上面创建的map.js文件
    export default {
      name: ‘app‘,
      data(){
        return {
          ak: "这里是您的密钥",
        }
      },
      async mounted(){
          await MP(this.ak);
      }
    }
    </script>
    

      要使用的vue文件中

  • mounted() {
    // 解决BMap undefined
    this.$nextTick(() => {
      var timer = setTimeout(() => {
        this.getMap();
      }, 500);
    });
    },
    

    好啦,通过上面的代码刷新显示地图就解决啦,若大家有更好的方法欢迎分享在下面??????,期待中…

以上是关于Bmap未定义,怎么会出现这个错误的主要内容,如果未能解决你的问题,请参考以下文章

IE开发人员工具显示异常,IE加载百度地图,BMap“未定义”

解决vue中BMap未定义问题

论坛出现:“jquery未定义”错误提示,怎样解决?

vb过程中出现子程序或函数未定义怎么解决

wps转为pdf出现未定义书签

c#中出现了object未定义怎么解决