Vue百度地图获取当前位置
文章描述：
Vue开发使用百度地图获取当前位置，vue定位当前位置
创建应用和获取ak
1、百度地图开发平台地址：https://lbsyun.baidu.com/index.php
2、控制台 → 应用管理 → 我的应用 → 创建应用
Vue引入
（1）第一种：根目录→public/index.html文件里面</head>里面添加，你的ak密钥需要替换真实的你的ak码
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxx"></script>（2）第二种：根目录→src下面新建util/getUserLocation.js文件，你的ak密钥需要替换真实的你的ak码
// 这段代码写在js文件里
export function loadBMap(funcName) {
const script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=2.0&ak=xxxxxx&callback=" + funcName;
document.body.appendChild(script);
}建议使用第二种
使用
import Vconsole from "vconsole";
import {Toast} from 'mint-ui';
import {loadBMap} from '@/util/getUserLocation';
export default{
data(){
return{
}
},
created() {
const vconsole = new Vconsole();
vconsole;
window.initBaiduMapScript = () =>{
console.log(BMap);
this.getlocation();
}
loadBMap('initBaiduMapScript');
},
methods:{
getlocation(){
this.$nextTick(function(){
try{
const geolocation =new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
console.log(r,"aaaa");
if(this.getStatus() == BMAP_STATUS_SUCCESS){
const{lat =null, lng=null} = r.point;
}
});
}catch(e){
console.log(e)
}
})
}
}
}npm run build
打包后部署到https域名后运行结果：
发布时间：2023/01/05
发表评论