报错如下,可能是因为目标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. 「HNOI2016」最小公倍数

    链接 loj 一道阔爱的分块 题意 边权是二元组(A, B),每次询问u, v, a, b,求u到v是否存在一条简单路径,使得各边权上\(A_{max} = a, B_{max} = b\) 分析 对 ...

  2. SCOI 2015 Day1 简要题解

    「SCOI2015」小凸玩矩阵 题意 一个 \(N \times M\)( $ N \leq M $ )的矩阵 $ A $,要求小凸从其中选出 $ N $ 个数,其中任意两个数字不能在同一行或同一列, ...

  3. Codeforces | CF1033D 【Divisors】

    题目大意:给定\(n(1\leq n\leq500)\)个数\(a_1,a_2\cdots,a_n(1\leq a_i\leq2\cdot10^{18})\),每个数有\(3\sim5\)个因数,求\ ...

  4. CSS之FLex布局介绍

    网页布局(layout)是CSS的一个重点应用. img 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如, ...

  5. 【dfs】P1331 海战

    题目描述 在峰会期间,武装部队得处于高度戒备.警察将监视每一条大街,军队将保卫建筑物,领空将布满了F-2003飞机.此外,巡洋船只和舰队将被派去保护海岸线.不幸的是因为种种原因,国防海军部仅有很少的几 ...

  6. nio再学习之通道channel

    通道(Channel):用于在数据传输过程中,进行输入输出的通道,其与(流)Stream不一样,流是单向的,在BIO中我们分为输入流,输出流,但是在通道中其又具有读的功能也具有写的功能或者两者同时进行 ...

  7. Android 新架构组件 -- WorkManager

    Android WorkManager compile "android.arch.work:work-runtime:1.0.0-alpha02" 继承Worker类并实现doW ...

  8. 使用visual C++测试

    背景:学习一门语言最好的方式就是实际动手敲一遍.现在敲一遍的障碍是不能熟练的使用工具,特此记录下来 新建工程 新建——项目——Windows 控制台应用程序 如何新建测试用例呢? OJ试题在VS201 ...

  9. Django(五)框架之模板继承和静态文件配置

    https://www.cnblogs.com/haiyan123/p/7731959.html 一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% end ...

  10. SecureCRT或XShell软件

    SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单地说是Windows下登录UNIX或Linux服务器主机的软件. Xshell 是一个强大的安全终端模拟软件,它支持SSH1 ...