文档地址: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 局部注册使用的更多相关文章

  1. Vue Baidu Map局部注册实现和地图绘点

    需求:在vue项目中,实现用户选择地图绘点或者通过搜索关键字选点 <template> <div id="home"> <h2>首页地图< ...

  2. vue Baidu Map --- vue百度地图插件

    vue Baidu Map 官网:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation javascript 官网:http:/ ...

  3. Vue组件全局/局部注册

    全局注册 main.js中创建 Vue.component('button-counter', { data: function () { return { count: 0 } }, templat ...

  4. Vue Baidu Map 插件的使用

    最近在做一个项目,技术采用的是Vue.js套餐,有个百度地图的需求,当时,大脑宕机,立马去引入百度地图API,当时想到两种方法,一种是在index.html中全局引入js,此法吾不喜,就采用了第二种异 ...

  5. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  6. Vue2.0源码学习(6) - 组件注册

    组件注册 前言 在 Vue.js 中,除了它内置的组件如 keep-alive.component.transition.transition-group 等,其它用户自定义组件在使用前必须注册.在开 ...

  7. vue2.0 vs vue

    vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...

  8. Vue2.0总结———vue使用过程常见的一些问题

    Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...

  9. 使用Vue Baidu Map对百度地图实现输入框搜索定位

    前端时间需要在页面的输入框输入地址,搜索并在百度地图上获取选定结果的坐标,前端使用了Vue + Element-ui,地图方面直接使用了封装好的百度地图vue组件-vue-baidu-map     ...

随机推荐

  1. 2017.11.11日后matlab统一过期需激活解决办法

    转载自此处: 在matlab安装目录中找到license目录,并创建license.lic文件,然后把以下内容copy到文件中,重启matlab. INCREMENT Aerospace_Blocks ...

  2. Selenium基础知识(四)表单切换

    在测试过程中,经常会碰到frame和iframe,嵌套等情况 这种情况下直接通过id,name等等是无法定位到的 好在selenium替我们想到了这个问题switch_to方法解决问题 switch_ ...

  3. Flume:sink.type=hive

    Flume以Kafka为Source,以Hive为Sink进行数据转存. 业务背景:公司要求将某四川城市的卡口数据实时接入大数据平台中,历史数据可以通过Hive进行Load,也就是增量数据的对接问题. ...

  4. MySQL.配置MariaDB的字符集

    配置MariaDB的字符集 环境: 操作系统:CentOS Linux release 7.x mariadb安装及配置 yum install mariadb-server mariadb #安装 ...

  5. 在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运行的处理器进行 ...

  6. Day11 多进程与多线程编程

    一.进程与线程 1.什么是进程(process)? An executing instance of a program is called a process. Each process provi ...

  7. Redis Cluster(集群)的搭建

    一.Redis的下载.安装.启动(单实例) 我们统一将Redis安装在/opt目录下,执行命令如下: $ cd /opt $ wget http://download.redis.io/release ...

  8. MySql 学习参考目录

    [1]< MySql 数据类型> [2]< MySql 基础 > [3]< MySql 存储过程 > PS:个人认为,如上总结超值. Good Good Study ...

  9. python 简单了解namedtuple

    namedtuple类位于collections模块,有了namedtuple后通过属性访问数据能够让我们的代码更加的直观更好维护 namedtuple能够用来创建类似于元祖的数据类型,除了能够用索引 ...

  10. 实现私有化(Pimpl) --- QT常见的设计模式

    转载自:http://blog.sina.com.cn/s/blog_667102dd0100wxbi.html 一.遇到的问题 1.隐藏实现 我们在给客户端提供接口的时候只希望能暴露它的接口,而隐藏 ...