首先附上vue-baidu-map 文档地址: https://dafrok.github.io/vue-baidu-map/#/zh/index

1.安装,初步使用,文档说的都很明白,就不在过多重复,特别强调哦一下 @ready 方法必须配置一下 如下图:

2..使用控件,覆盖物之类的方法

 html:

<!-- 组件 -->
<baidu-map
class="Bmap"
ak='你的秘钥'
:center="center"
:zoom="zoom"
@ready="handler"
:style='conheight' //自己定义了高度 按浏览器高度变化
:scroll-wheel-zoom="true" //鼠标滚动控制缩放
@click='getPoint'
>
<!-- 地图;类型 -->
<bm-map-type
:map-types="['BMAP_HYBRID_MAP','BMAP_NORMAL_MAP']"
anchor="BMAP_ANCHOR_TOP_RIGHT'
></bm-map-type>
<!-- 城市 搜索 列表 -->
<bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{width:100,height:10}"></bm-city-list> // 标红部分 设置位置(找了好久才找到这个方法)
< -- 定位-->
<bm-geolocation
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="true"
:autoLocation="true"
></bm-geolocation>
<!-- 标记 点 -->
<bm-marker :position="postionMap">
</bm-marker>
</baidu-map>

js

import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'; // 局部注册
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'; //定位
import BmMapType from 'vue-baidu-map/components/controls/MapType.vue'; //地图类型
import BmCityList from 'vue-baidu-map/components/controls/CityList.vue'; //城市列表
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'; //标记 点 export default {
name: 'mapNum',
components: { BaiduMap, BmGeolocation, BmMapType, BmCityList, BmMarker },
data () {
return {
center: { lng: , lat: }, //经纬度
zoom: ,  //地图展示级别
}
}
}

效果图:地图类型,选择城市,定位

vue-baidu-map 的简单使用的更多相关文章

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

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

  2. vue2.0之Vue Baidu Map 局部注册使用

    文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage 局部注册 <template> <baidu-map id= ...

  3. Vue Baidu Map 插件的使用

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

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

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

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

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

  6. Baidu Map开发示例

    1.获取SHA1码 在Eclipse中点击“Windows”----->“Preferences” ----->“Android” ----->“Build”如下图: 打开“Win+ ...

  7. 总结Vue第一天:简单介绍、基本常用知识、辅助函数

    总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...

  8. 提高Baidu Map聚合的效率

    百度的MAP的例子里提供了一个聚合效果,地址是http://developer.baidu.com/map/jsdemo.htm#c1_4 ,效果图如下图: 这个效果很赞,但效率很低,当数据量达到50 ...

  9. Add baidu map in your website (wordpress)

    手动挡 访问应用(AK)Key http://lbsyun.baidu.com/apiconsole/key Basic Map Generator http://api.map.baidu.com/ ...

  10. 百度地图实现车辆轨迹移动播放(baidu map api)

    开发技术:jquery,js baidu map api,json,ajax QQ1310651206

随机推荐

  1. Linux之DHCP搭建命令集锦

    systemctl start dhcpd        //启动DHCP systemctl enable dhcpd                //配置服务开机启动 ps aux | grep ...

  2. kafka可视化客户端工具Kafka Tool

    1.下载 下载地址:http://www.kafkatool.com/download.html 2.安装 根据不同的系统下载对应的版本,我这里kafka版本是1.1.0,下载kafka tool 2 ...

  3. linux与windows实现文件交互

    Linux--用SecureCRT来上传和下载文件 SecureCRT下的文件传输协议有以下几种:ASCII.Xmodem.Ymodem.Zmodem ASCII:这是最快的传输协议,但只能传送文本文 ...

  4. 使用 Laragon 在 Windows 中快速搭建 Laravel 本地开发环境 (转)

    laravel学院 简介 对于那些使用 Windows 操作系统的同学来说,Homestead 和 LaraDock 虽说支持 Windows 系统,但是对初学者来说,安装配置起来还是有一定复杂度的, ...

  5. 712. Minimum ASCII Delete Sum for Two Strings

    题目: Given two strings s1, s2, find the lowest ASCII sum of deleted characters to make two strings eq ...

  6. AOP之配置文件实现

    看了http://www.cnblogs.com/xrq730/p/4919025.html这篇文章之后自己跟着做了一遍,有需要可以去看原文,比我写的更详细. AOP AOP(Aspect Orien ...

  7. Linux内存管理(一)

    Linux内存管理之一:基本概念篇 物理地址.线性地址(虚拟地址)和逻辑地址:阐述段式管理和页式管理基本概念:Linux操作系统内存管理和虚拟内存概念:为内核开发做一个基础铺垫. 内存是linux内核 ...

  8. python学习小总结(列表、元组、字典、集合、字符串)

    ---恢复内容开始--- 一.列表(list) 1.添加 append():追加,在列表末尾添加元素. 列表名.append(添加的元素) extend():扩展,在列表末尾添加元素. 列表名.ext ...

  9. history program(language)

    1950与1960年代 有三个现代编程语言于1950年代被设计出来,这三者所衍生的语言直到今日仍旧广泛地被采用: Fortran (1955),名称取自"FORmula TRANslator ...

  10. 使用后台的limit 控制每页的容量

    和上一个不使用limit的不同,如果不使用后台的限制,那么就必须自己定义一个计算属性,并且v-for这个计算的数组,而如果要用到后台的限制,那么就不需要自己计算,v-for的直接就是后台获取的数组 1 ...