vue百度地图 + 定位的详解
作者:omyrobin2 时间:2024-06-07 15:20:37
vue 百度地图 + 定位
前提需要自己有百度的密钥,如没有可以去百度地图申请
一、在主目录下的index.html引入js,例如:
二、在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级,例如:
三、在项目中引入BMap:
四、代码:
<template>
<div class="home">
<div id="allmap" class="allmap"></div>
</div>
</template>
<script>
import {getStore, setStore, removeStore} from '@/config/Utils'
import BMap from 'BMap'
export default {
data () {
return {
type: 'tab',
address_detail: null,
center: {lng: 116.40387397, lat: 39.91488908}
}
},
mounted () {
this.ready()
},
methods: {
ready () {
let map = new BMap.Map('allmap')
let point = new BMap.Point(this.center.lng, this.center.lat)
map.centerAndZoom(point, 10)
map.enableScrollWheelZoom(true)
map.enableDoubleClickZoom(true)
var geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition((r) => {
if (r.point) {
this.center.lng = r.longitude
this.center.lat = r.latitude
let markers = new BMap.Marker(r.point)
map.addOverlay(markers)
map.panTo(r.point)
map.centerAndZoom(r.point, 16)
}
}, { enableHighAccuracy: true })
}
}
}
</script>
<style>
#allmap{
width: 100%;
height: 15rem;
}
</style>
五、效果:
如有错误地方,请留言指教,谢谢大家
以上所述是小编给大家介绍的vue百度地图 + 定位详解整合网站的支持!
来源:https://blog.csdn.net/gh1205/article/details/78929217
标签:vue,百度地图,定位


猜你喜欢
js表单验证控制代码大全
2010-03-07 14:25:00
MySql导入CSV文件或制表符分割的文件
2024-01-19 07:43:54

Python字符串中添加、插入特定字符的方法
2021-05-14 00:16:53

如何利用Golang解析读取Mysql备份文件
2024-01-28 20:51:19
Centos7安装和配置Mysql5.7
2024-01-21 12:02:22

win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2022-12-19 11:56:28

python常见数制转换实例分析
2021-04-04 08:09:32
最强大最好最全的javascript 验证表单的例子
2010-03-14 11:26:00
一个基于flask的web应用诞生 bootstrap框架美化(3)
2023-12-04 02:30:39

百度的图片轮换JS代码,支持FF
2007-11-16 16:24:00
tensorboard 可以显示graph,却不能显示scalar的解决方式
2022-07-21 08:55:46

pandas读取Excel批量转换时间戳的实践
2023-04-20 12:47:07
详解Python flask的前后端交互
2023-03-19 06:41:05

利用SQL语句对不同数据库进行高效果分页
2008-11-28 14:44:00
Python高级特性 切片 迭代解析
2022-03-28 14:32:49

解决pytorch DataLoader num_workers出现的问题
2022-10-22 06:34:38

关于torch中tensor数据类型的转换
2022-07-16 20:59:59

Python多个装饰器的调用顺序实例解析
2021-09-30 06:54:56
Mysql数据库中数据表的优化、外键与三范式用法实例分析
2024-01-23 10:09:00

python中enumerate的用法实例解析
2023-03-10 19:11:18