vue项目 调用百度地图 BMap is not defined

最近项目中使用百度地图:

研究了好一会,总是报错BMap is not defined

%title插图%num

我只有一个页面需要用到地图,所以我是使用cdn引入的方式来写的,并没有像网上一些教程一样使用npm引入安装。

直接简单粗暴的根据百度地图api来写,虽然报错。那就解决报错的bug就行了。好了,下面开始说说步骤

在需要页面的处引入cdn:

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>  

我的是在</template>标签结尾后引用的

在webpack配置里module.exports中加个externals

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    // app: './src/main.js'
    app: ["babel-polyfill", "./src/main.js"] //引入babel-polyfill 兼容IE
  },
  externals: { "BMap": "BMap" },

此处依旧报错

接着,使用异步加载

新建一个map.js,里边的内

export function map(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);  
  })  
} 

在需要页面import进来, import {map} from ‘@/map.js’

最后挂载,在css上,记得设置地图盒子宽高,不然显示不出

mounted () {
      this.$nextTick(function(){  
        var _this = this;  
        MP(_this.ak).then(BMap => {  
          var map = new BMap.Map("allmap");
          var point = new BMap.Point(经纬度,经纬度);
          map.centerAndZoom(point, 19);
          var marker = new BMap.Marker(point);  // 创建标注
          map.addOverlay(marker);              // 将标注添加到地图中

          var label = new BMap.Label("公司名字",{offset:new BMap.Size(20,-10)});
          label.setStyle({
                  borderColor : "black"
                  
              });
          //marker.addEventListener("click", function(){    //点击弹出可去掉注释      
              marker.setLabel(label); //开启信息窗口
          //});  //点击弹出可去掉注释         

        })
      })
    }

  百度地图生成器

  http://api.map.baidu.com/lbsapi/creatmap/index.html

        百度地图拾取坐标系统
        http://api.map.baidu.com/lbsapi/getpoint/index.html

        百度地图JavaScript API
        http://lbsyun.baidu.com/index.php?title=jspopular

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:青梅博客 » vue项目 调用百度地图 BMap is not defined

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活