报错如下,可能是因为目标div还没生成

elementUi文档说明

在dom生成后再调用,正常

    buildMap(){
let map = new BMap.Map("allmap");
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用 let myGeo = new BMap.Geocoder();
myGeo.getPoint(this.address, function(point){
if (point) {
map.centerAndZoom(point, );
let marker = new BMap.Marker(point)
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}else{
alert("您选择地址没有解析到结果!");
}
}, "广东省");
}
    <!--百度地图定位-->
<el-dialog title="百度地图定位" :visible.sync="showMap" @opened="buildMap">
<div id="allmap" :style="'height: '+window.screen.height*0.5+'px'"></div>
</el-dialog>

效果

vue使用百度地图

直接在index引入即可,不要用什么百度地图vue版,不好用,缺功能

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script><!--百度地图-->

参考

vue里面使用百度地图api 报错 Cannot read property 'gc' of undefined

百度地图api

elementUi模态框使用baiduMap错误记录的更多相关文章

  1. elementui 模态框 拖动

    第一步引入import elDragDialog from "@/directive/el-dragDialog";第二步 在export default中声明directives ...

  2. Ionic3错误记录:navigation stack needs at least one root page

    BUG场景:在 ActionSheetController 使用modalCtrl.create 创建模态框时报如下错误 原代码片段 解决方式: 重新设置root page

  3. element-ui公用模态框自定义样式与scoped样式生效问题解决方案

    //先插如效果图 里面内容均为传进来的.包括取消与确定按钮,因为每个页面的绑定事件不一样. //下面这个图片为初始样式 //拖动模态框指令需要插件.详情看我下一篇,以下是地址 https://www. ...

  4. 使用Bootstrap模态框实现增删改查功能

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 本文实现的是使用模态框实现简单的增删改查的功能. ...

  5. 使用ajax请求,模态框调用并更改密码

    前端页面 <a href="javascript:void(0);" onclick="changPassword()"> <i class= ...

  6. BootStrap——模态框

    模态框(Modal)是BootStrap中很棒的一个插件.可以去BootStrap菜鸟驿站里面看看. 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开 ...

  7. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  8. Bootstrap 模态框

    Bootstrap 模态框(也可以说的弹出层) 最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可 ...

  9. Bootstrap 模态框(也可以说的弹出层)

    最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html ...

随机推荐

  1. 【BZOJ4832】抵制克苏恩(矩阵快速幂,动态规划)

    [BZOJ4832]抵制克苏恩(矩阵快速幂,动态规划) 题面 BZOJ 题解 一模一样 #include<iostream> #include<cstdio> using na ...

  2. Atcoder | AT2665 【Moderate Differences】

    又是一道思路特别清奇的题qwq...(瞪了一上午才发现O(1)的结论...差点还想用O(n)解决) 问题可以转化为是否能够由\(f_{1}=a\)通过\(\pm x \in[c,d]\)得到\(f_{ ...

  3. SP8791 DYNALCA - Dynamic LCA 解题报告

    SP8791 DYNALCA - Dynamic LCA 有一个森林最初由 \(n (1 \le n \le 100000)\) 个互不相连的点构成 你需要处理以下操作: link A B:添加从顶点 ...

  4. 持久化和公平分发.py

    1.消息持久化在实际应用中,可能会发生消费者收到Queue中的消息,但没有处理完成就宕机(或出现其他意外)的情况,这种情况下就可能会导致消息丢失.为了避免这种情况发生,我们可以要求消费者在消费完消息后 ...

  5. wave

    题意:求有多少个1~n的排列满足: 其中n<=50 解: 贼神的一道题. 如何处理绝对值? 从小到大按顺序放数,可以拆掉绝对值. 如果你放的旁边有个空隙,那么贡献-i,如果旁边有个数,贡献+i ...

  6. python面向对象编程 -- 基本概念

    面向对象的编程简要概括就是将要处理的问题抽象为数据和操作的集合,用类对其进行封装.其中数据和操作都称为类的属性,它们是一般是不变的. 对类进行实例化生成我们所说的对象,对象有自己的属性.对象的属性一般 ...

  7. Vue+Django2.0 restframework打造前后端分离的生鲜电商项目(2)

    1.restful api介绍 1.前后端分离的优缺点 1.为什么要用前后端分离 1.pc.app.pad多端适应 2.SPA(单页面应用)开发模式开始流行 3.前后端分离职责不清 4.开发效率问题, ...

  8. 浅谈CSRF(Cross-site request forgery)跨站请求伪造(写的非常好)

    一 CSRF是什么 CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者X ...

  9. Ubuntu的 g++ gcc版本升降级

    更改gcc默认版本(gcc版本降级/升级) ### 以降级到gcc-6为例 >* sudo apt install gcc-6 g++-6 >* sudo update-alternati ...

  10. Jquery Mobile列表

    向 <ol> 或 <ul> 元素添加 data-role="listview" 1.圆角和外边距 :data-inset="true" ...