1、安装

$ npm install vue-baidu-map --save

2、全局注册,在main.js中引入以下代码

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '你申请的key'
})

3、界面

<template>
<baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
</baidu-map>
</template>
<script>
export default {
name: 'TestBaiDu',
data () {
return {
center: {lng: 109.45744048529967, lat: 36.49771311230842},
zoom: 13
}
},
methods: {
handler ({BMap, map}) {
var point = new BMap.Point(109.49926175379778, 36.60449676862417)
map.centerAndZoom(point, 13)
var marker = new BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
map.addOverlay(circle)
},
getClickInfo (e) {
console.log(e.point.lng)
console.log(e.point.lat)
this.center.lng = e.point.lng
this.center.lat = e.point.lat
}
}
}

  

最新文章

  1. 【crawler】log4j:WARN No appenders could be found for logger (dao.hsqlmanager).
  2. python中if __name__ == &#39;__main__&#39;: 的解析
  3. OS初识
  4. 原生的强大DOM选择器querySelector
  5. Ubuntu 重新设置网络
  6. 【学习笔记】【C语言】指向结构体的指针
  7. HTTP性能测试
  8. 【Telerik控件学习】-建立自己的图形编辑工具(Diagram)
  9. Leetcode题解(十五)
  10. CentOS7关闭/开启防火墙出现 Unit iptables.service failed to load
  11. Django_rest framework 框架介绍
  12. [Swift]LeetCode80. 删除排序数组中的重复项 II | Remove Duplicates from Sorted Array II
  13. nginx 中用 sed 批量增加配置文件内容
  14. [YARN] 2.2 GB of 2.1 GB virtual memory used. Killing container.
  15. 四则运算 python
  16. ngnix简介以及如何实现负载均衡原理
  17. So you want to be a computational biologist?
  18. 【Algorithm】二分查找
  19. 【maven】使用import scope解决maven继承(单)问题
  20. Spring集成Redis使用注解

热门文章

  1. 读懂操作系统之快表(TLB)原理(七)
  2. Redis的各种数据类型到底能玩出什么花儿?
  3. Python之filter、map、reduce函数
  4. 国内安装Homebrew
  5. 线程_FIFO队列实现生产者消费者
  6. JS中Math.random()的使用和扩展
  7. 9 16 模拟赛&amp;关于线段树上二分总结
  8. mit-6.828 Lab01:Booting a PC exercise1.1
  9. IDEA生成MyBatis文件
  10. mnist手写数字识别——深度学习入门项目(tensorflow+keras+Sequential模型)