vue2.0之Vue Baidu Map 局部注册使用
文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
局部注册
<template>
<baidu-map id="mapContent" class="bm-view" ak="YOUR_APP_KEY" :center="center" :zoom="zoom" @ready="handler">
<bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true">
</bm-marker>
</baidu-map>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
export default {
data() {
return {
center: {lng: 116.404,lat: 39.915},
zoom: 15
}
},
components: {
BaiduMap,
BmMarker
},
}
</script>
备注
1.独立组件均存放在 vue-baidu-map/components
文件夹下.
2 从node_modules/vue-baidu-map/components/index.js下面找对应插件如下图:
3.components下必须添加对应插件
vue2.0之Vue Baidu Map 局部注册使用的更多相关文章
- Vue Baidu Map局部注册实现和地图绘点
需求:在vue项目中,实现用户选择地图绘点或者通过搜索关键字选点 <template> <div id="home"> <h2>首页地图< ...
- vue Baidu Map --- vue百度地图插件
vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...
- Vue组件全局/局部注册
全局注册 main.js中创建 Vue.component('button-counter', { data: function () { return { count: 0 } }, templat ...
- Vue Baidu Map 插件的使用
最近在做一个项目,技术采用的是Vue.js套餐,有个百度地图的需求,当时,大脑宕机,立马去引入百度地图API,当时想到两种方法,一种是在index.html中全局引入js,此法吾不喜,就采用了第二种异 ...
- Vue2.0学习--Vue数据通信详解
一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...
- Vue2.0源码学习(6) - 组件注册
组件注册 前言 在 Vue.js 中,除了它内置的组件如 keep-alive.component.transition.transition-group 等,其它用户自定义组件在使用前必须注册.在开 ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
- Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- 使用Vue Baidu Map对百度地图实现输入框搜索定位
前端时间需要在页面的输入框输入地址,搜索并在百度地图上获取选定结果的坐标,前端使用了Vue + Element-ui,地图方面直接使用了封装好的百度地图vue组件-vue-baidu-map ...
随机推荐
- 2017.11.11日后matlab统一过期需激活解决办法
转载自此处: 在matlab安装目录中找到license目录,并创建license.lic文件,然后把以下内容copy到文件中,重启matlab. INCREMENT Aerospace_Blocks ...
- Selenium基础知识(四)表单切换
在测试过程中,经常会碰到frame和iframe,嵌套等情况 这种情况下直接通过id,name等等是无法定位到的 好在selenium替我们想到了这个问题switch_to方法解决问题 switch_ ...
- Flume:sink.type=hive
Flume以Kafka为Source,以Hive为Sink进行数据转存. 业务背景:公司要求将某四川城市的卡口数据实时接入大数据平台中,历史数据可以通过Hive进行Load,也就是增量数据的对接问题. ...
- MySQL.配置MariaDB的字符集
配置MariaDB的字符集 环境: 操作系统:CentOS Linux release 7.x mariadb安装及配置 yum install mariadb-server mariadb #安装 ...
- 在caffe-ssd的环境搭建中遇到报错信息:Makefile:588: recipe for target '.build_release/cuda/src/caffe/layers/softmax_loss_layer.o' failed
错误原因: 1.计算机没有安装GPU 2.有GPU但是NVCCFLAGS设置错误 解决方法: 1.对没有GPU的计算机,需要将Makefile中的CPU之前的#注释去掉,是的caffe运行的处理器进行 ...
- Day11 多进程与多线程编程
一.进程与线程 1.什么是进程(process)? An executing instance of a program is called a process. Each process provi ...
- Redis Cluster(集群)的搭建
一.Redis的下载.安装.启动(单实例) 我们统一将Redis安装在/opt目录下,执行命令如下: $ cd /opt $ wget http://download.redis.io/release ...
- MySql 学习参考目录
[1]< MySql 数据类型> [2]< MySql 基础 > [3]< MySql 存储过程 > PS:个人认为,如上总结超值. Good Good Study ...
- python 简单了解namedtuple
namedtuple类位于collections模块,有了namedtuple后通过属性访问数据能够让我们的代码更加的直观更好维护 namedtuple能够用来创建类似于元祖的数据类型,除了能够用索引 ...
- 实现私有化(Pimpl) --- QT常见的设计模式
转载自:http://blog.sina.com.cn/s/blog_667102dd0100wxbi.html 一.遇到的问题 1.隐藏实现 我们在给客户端提供接口的时候只希望能暴露它的接口,而隐藏 ...