安装

npm install vue-baidu-map --save

全局注册

全局注册将一次性引入百度地图组件库的所有组件。需在入口文件main.js中引入vue-baidu-map

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})

因为是全局注册的,所以你可以在任何组件中直接使用:

<template>
<baidu-map class="bm-view">
</baidu-map>
</template> <style>
.bm-view {
width: 100%;
height: 300px;
}
</style>

局部注册

如果有按需引入组件的需要,可以选择局部注册百度地图组件,这将减少工程打包后的容量尺寸。局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下,按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行,如果引入组件时发生运行时错误,请检查 webpack 的 loader 配置,确认 include 和 exclude 选项命中了组件库。

<template>
<baidu-map class="bm-view" ak="YOUR_APP_KEY">
</baidu-map>
</template> <script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
components: {
BaiduMap
}
}
</script> <style>
.bm-view {
width: 100%;
height: 300px;
}
</style>

点我查看官方文档

vue中使用百度地图vue-baidu-map的更多相关文章

  1. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  2. Vue中使用百度地图——根据输入框输入的内容,获取详细地址

    知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客:  百度地图的引用,初步了解参考博客:http://blog.csdn. ...

  3. vue中实现百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  4. Vue --》 如何在vue中调用百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  5. vue 中结合百度地图获取当前城市

    首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...

  6. vue中引入百度地图

    xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...

  7. vue 中引用 百度地图

    1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...

  8. VUE 中引入百度地图(vue-Baidu-Map)

    1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...

  9. vue中使用百度地图,悬浮窗搜索功能

    https://www.cnblogs.com/shuaifing/p/8185311.html 侵删 <template> <div id="all"> ...

随机推荐

  1. php正则表达式中preg_match_all函数的详解

    php正则表达式中的函数我们之前为大家结果一个preg_match函数,相信大伙对此有所了解,那么php正则表达式中preg_match_all函数的具体使用是如何的呢?今天我们就带大家了解php正则 ...

  2. testNG 注释实例

    1. 单个测试用例文件 新建TestDBConnection.java文件 import org.testng.annotations.*; public class TestDBConnection ...

  3. C#数字千分位

    C#中把数字转换成带两位小数的千分位字符 如1234567.891变成1,234,567.89 方法:String.Format("{0:N}",1234567.891);   / ...

  4. PDF 补丁丁 0.6.2.3572 测试版发布

    近日有网友反馈 3571 测试版的补丁丁无法正常工作.请下载新发布的 3572 版本.

  5. 尚学堂JAVA基础学习笔记

    目录 尚学堂JAVA基础学习笔记 写在前面 第1章 JAVA入门 第2章 数据类型和运算符 第3章 控制语句 第4章 Java面向对象基础 1. 面向对象基础 2. 面向对象的内存分析 3. 构造方法 ...

  6. Arm Qt编译Qt例程出错 GLES3/gl3.h: No such file or directory 解决方法

    工作环境 PC:Ubuntu18.04QtCreator: 4.8.2交叉编译环境:野火imxull6开发板提供的 5-编译工具链->qt交叉编译工具 在之前博客配置成功的交叉编译环境,编译Qt ...

  7. Django-模型层(单表操作)

    目录 1.ORM简介 2.单表操作 2.1创建表 2.2添加表纪录 2.3查询表纪录 2.4删除表纪录 2.5修改表纪录 1.ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了 ...

  8. 《深入理解 Java 虚拟机》读书笔记:Java 内存区域与内存溢出异常

    前言 最近开始看这本书,记得前段时间拿起这本书的时候,心情是相当沉重的!当时的剧本是这样的-- 内景.家里 - 下午 我(画外):唉,有点无聊啊!(偶然撇过书架)这么多书得看到什么时候啊,要不要拿一本 ...

  9. C++学习(1)—— 初识C++

    1. 变量 作用:给一段指定的内存空间起名,方便操作这段内存空间 语法:数据类型 变量名称=变量初始值​ #include<iostream> using namespace std; i ...

  10. 解决页面初始化vue加载代码问题

    <style type="text/css"> /* 解决页面初始化vue加载代码问题 */ [v-cloak] { display: none; } </sty ...