文档地址: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. 从零开始一起学习SLAM | 为什么要学SLAM?

    在<零基础小白,如何入门计算机视觉?>中我提到过,计算机视觉的研究目前主要分为两大方向:基于学习的方法和基于几何的方法.其中基于学习的方法最火的就是深度学习,而基于几何方法最火的就是视觉S ...

  2. cocosStudio制作ScrollView并在cocos2dx 3.0中使用。

    使用cocosStudio制作界面基本已成为基础了,之前都是拖动一些 Image.Button的小控件,再用到层容器和滚动层的时候,习惯性的用拖动来改变控件的大小.但是你在把其他的控件拖动到上面的时候 ...

  3. ASP.Net Core 2.2 MVC入门到基本使用系列 (四)(转)

    本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...

  4. node.js初识10

    post请求 form.html <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. Spring框架第一天

    ## 今天课程:Spring框架第一天 ## ---------- **Spring框架的学习路线** 1. Spring第一天:Spring的IOC容器之XML的方式,Spring框架与Web项目整 ...

  6. C# 5.0五大新特性

    第一:绑定运算符,:=: 这个只是简化了数据绑定,跟ASP.NET MVC3不断改进一样,其实不是什么亮点改进. comboBox1.Text :=: textBox1.Text; //将文本框的内容 ...

  7. mysql 5.6 分区与不分区的区别

    mysql> CREATE TABLE t1 ( id INT, date DATETIME DEFAULT CURRENT_TIMESTAMP) ENGINE=Innodb; Query OK ...

  8. spring 框架的优点

    谈spring 框架的优点就是说spring 框架2大核心技术的优点 1. 控制反转:控制反转是将对象的创建和管理交给spring容器,已经管理对象之间的依赖关系, 那么将对象的创建和生命周期的管理交 ...

  9. 1.sklearn库的安装

    sklearn库 sklearn是scikit-learn的简称,是一个基于Python的第三方模块.sklearn库集成了一些常用的机器学习方法,在进行机器学习任务时,并不需要实现算法,只需要简单的 ...

  10. html5-表单的综合实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...