vue中使用百度地图vue-baidu-map
安装
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的更多相关文章
- Vue中使用百度地图——设置地图标注
知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...
- Vue中使用百度地图——根据输入框输入的内容,获取详细地址
知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客: 百度地图的引用,初步了解参考博客:http://blog.csdn. ...
- vue中实现百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- Vue --》 如何在vue中调用百度地图
1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...
- vue 中结合百度地图获取当前城市
首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...
- vue中引入百度地图
xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...
- vue 中引用 百度地图
1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...
- VUE 中引入百度地图(vue-Baidu-Map)
1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...
- vue中使用百度地图,悬浮窗搜索功能
https://www.cnblogs.com/shuaifing/p/8185311.html 侵删 <template> <div id="all"> ...
随机推荐
- php正则表达式中preg_match_all函数的详解
php正则表达式中的函数我们之前为大家结果一个preg_match函数,相信大伙对此有所了解,那么php正则表达式中preg_match_all函数的具体使用是如何的呢?今天我们就带大家了解php正则 ...
- testNG 注释实例
1. 单个测试用例文件 新建TestDBConnection.java文件 import org.testng.annotations.*; public class TestDBConnection ...
- C#数字千分位
C#中把数字转换成带两位小数的千分位字符 如1234567.891变成1,234,567.89 方法:String.Format("{0:N}",1234567.891); / ...
- PDF 补丁丁 0.6.2.3572 测试版发布
近日有网友反馈 3571 测试版的补丁丁无法正常工作.请下载新发布的 3572 版本.
- 尚学堂JAVA基础学习笔记
目录 尚学堂JAVA基础学习笔记 写在前面 第1章 JAVA入门 第2章 数据类型和运算符 第3章 控制语句 第4章 Java面向对象基础 1. 面向对象基础 2. 面向对象的内存分析 3. 构造方法 ...
- Arm Qt编译Qt例程出错 GLES3/gl3.h: No such file or directory 解决方法
工作环境 PC:Ubuntu18.04QtCreator: 4.8.2交叉编译环境:野火imxull6开发板提供的 5-编译工具链->qt交叉编译工具 在之前博客配置成功的交叉编译环境,编译Qt ...
- Django-模型层(单表操作)
目录 1.ORM简介 2.单表操作 2.1创建表 2.2添加表纪录 2.3查询表纪录 2.4删除表纪录 2.5修改表纪录 1.ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了 ...
- 《深入理解 Java 虚拟机》读书笔记:Java 内存区域与内存溢出异常
前言 最近开始看这本书,记得前段时间拿起这本书的时候,心情是相当沉重的!当时的剧本是这样的-- 内景.家里 - 下午 我(画外):唉,有点无聊啊!(偶然撇过书架)这么多书得看到什么时候啊,要不要拿一本 ...
- C++学习(1)—— 初识C++
1. 变量 作用:给一段指定的内存空间起名,方便操作这段内存空间 语法:数据类型 变量名称=变量初始值 #include<iostream> using namespace std; i ...
- 解决页面初始化vue加载代码问题
<style type="text/css"> /* 解决页面初始化vue加载代码问题 */ [v-cloak] { display: none; } </sty ...