vue自动定位，百度地图

1.在index.html 引入

2.获取百度地图密钥，参考

https://jingyan.baidu.com/article/4b52d702902cb5fc5c774b38.html

3.在build/webpack.base.conf.js 中添加代码

externals: {

"BMap": "BMap"

4.代码，

百度地图的定位我一开始用pc测，定位到的地址和我当前的地址相差很大，一开始百度查看说百度地图使用的是火星坐标需要转义换算什么的算了很久，可是转换出来的经纬度还是不对，在这里卡了很久，后来查阅资料才发现因为pc端是通过IP定位的，所以存在偏差很大，用手机定位就准确了，把我遇到的问题跟大家分享一下，自己也当做个笔记，要是说的有问题欢饮指正

<template>
<div id="allmap"></div>
<button>点击按钮开始定位</button>
</template>
</script>
//import BMap from 'BMap' //根据我的实践这句代码好像并没有什么用，主要起作用的还是引入的js
export default {
data(){
return{
center: {lng: 116.40387397, lat: 39.91488908},
zoom: 15
}
},
methods: {
//点击按钮
locationbtn（）{
let map = new BMap.Map('allmap');
let point = new BMap.Point(this.center.lng, this.center.lat);
map.centerAndZoom(point, 15)
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition((r) => {
if (r.point) {
this.center.lng = r.longitude;
this.center.lat = r.latitude;
alert('您当前经纬度：'+this.center.lng+','+ this.center.lat);
var point = new BMap.Point( this.center.lng, this.center.lat);//用当前定位的经纬度查找省市区街道等信息
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents; console.log(rs.address);//地址信息
console.log(rs.address);//弹出当前所在地址
});
let markers = new BMap.Marker(r.point);
map.addOverlay(markers);
map.panTo(r.point);
map.centerAndZoom(r.point, 16);
}
})
}
}
}
</script>

vue自动定位，百度地图相关推荐

html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可二. 通过模块化引入 1. 安 ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
vue整合百度地图（关键字检索）
百度地图文章目录百度地图一.申请百度地图的密钥二.官方示例三.使用vue整合百度地图步骤说明 3.1 效果图: 3.2 方式一 vue脚手架2.0版本引用(不推荐): 3.3 方式二封装成 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
vue自定义百度地图弹窗
vue自定义百度地图弹窗 1.全局注册方式 1.1 引入百度地图和百度地图自定义弹窗js(自己去百度api里面下载就可以了) <!DOCTYPE html> <html lang=& ...
VUE使用百度地图插件
VUE使用百度地图插件实现功能百度地图的使用相关代码片段实现功能需求: 使用百度地图插件, 实现手动定位, 获取经纬度地址; 设置经纬度定位; 地址搜索百度地图的使用参考 Vue Bai ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
1. 解决提示:解决调用百度地图API弹出提示 "百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥"的方法百度官网生成ak: https://lb ...
vue集成百度地图(含搜索框获取经纬度)
vue-baidu-map文档地址 https://dafrok.github.io/vue-baidu-map/#/zh/index 第一步:vue下载百度地图插件 npm install vue- ...

vue自动定位，百度地图

1.在index.html 引入

2.获取百度地图密钥，参考

https://jingyan.baidu.com/article/4b52d702902cb5fc5c774b38.html

3.在build/webpack.base.conf.js 中添加代码

4.代码，

vue自动定位，百度地图相关推荐

最新文章

热门文章