VUE 中引入百度地图(vue-Baidu-Map)
2024-09-03 02:31:44
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
}
}
}
最新文章
- 【crawler】log4j:WARN No appenders could be found for logger (dao.hsqlmanager).
- python中if __name__ == &#39;__main__&#39;: 的解析
- OS初识
- 原生的强大DOM选择器querySelector
- Ubuntu 重新设置网络
- 【学习笔记】【C语言】指向结构体的指针
- HTTP性能测试
- 【Telerik控件学习】-建立自己的图形编辑工具(Diagram)
- Leetcode题解(十五)
- CentOS7关闭/开启防火墙出现 Unit iptables.service failed to load
- Django_rest framework 框架介绍
- [Swift]LeetCode80. 删除排序数组中的重复项 II | Remove Duplicates from Sorted Array II
- nginx 中用 sed 批量增加配置文件内容
- [YARN] 2.2 GB of 2.1 GB virtual memory used. Killing container.
- 四则运算 python
- ngnix简介以及如何实现负载均衡原理
- So you want to be a computational biologist?
- 【Algorithm】二分查找
- 【maven】使用import scope解决maven继承(单)问题
- Spring集成Redis使用注解
热门文章
- 读懂操作系统之快表(TLB)原理(七)
- Redis的各种数据类型到底能玩出什么花儿?
- Python之filter、map、reduce函数
- 国内安装Homebrew
- 线程_FIFO队列实现生产者消费者
- JS中Math.random()的使用和扩展
- 9 16 模拟赛&;关于线段树上二分总结
- mit-6.828 Lab01:Booting a PC exercise1.1
- IDEA生成MyBatis文件
- mnist手写数字识别——深度学习入门项目(tensorflow+keras+Sequential模型)