定位的三种实现方法
目前网页定位，使用的是浏览器定位，高德地图定位，百度地图定位，浏览器和高德我都试了，在火狐上是可以的，在谷歌浏览器不可以，高德地图官方解释是：
个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。
vue 获取当前位置经纬度（浏览器定位）
在vue中使用高德地图，获取定位
我这个网页，需要放在安卓app内，因为安卓的webview是谷歌内核，所以不会支持，最后我使用了百度地图，发现是可以的
Vue实现城市定位（利用百度地图
我这边有改动，我需要根据经纬度来转换到具体的地址。要先去申请ak，这个看官方文档
JavaScript API GL
在public文件夹下的index.html中引入百度的引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta base="/" id="base" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover,user-scalable=no"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>第一个vue</title>
<meta name="format-detection" content="telephone=yes"/>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=xxxxx"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=xxxxxx"></script>
</head>
<body>
在vue.config.js里
//压缩打包文件大小
configureWebpack: (config) => {
config.externals = {
"BMap": 'BMap'
在需要定位的地方。second.vue里使用
<template>
<div>{{ LocationCity }}</div>
</template>
<script>
export default {
name: "home",
data() {
return {
musicTypeJSON: {},
searchValue: "",
result: [],
titleTypeJSON: {},
LocationCity: "正在定位...",
};
},
methods: {
city() {
const geolocation = new BMap.Geolocation();
var _this = this;
geolocation.getCurrentPosition(
function getinfo(position) {
let city = position.address.city;
let province = position.address.province;
console.log(position);
var myGeo = new BMapGL.Geocoder();
myGeo.getLocation(
new BMapGL.Point(position.longitude, position.latitude),
function (result) {
if (result) {
_this.LocationCity ="经纬度："+position.longitude+","+position.latitude+",地址："+
result.address;;
}
}
);
},
function (e) {
_this.LocationCity = "定位失败";
},
{ provider: "baidu" }
);
},
},
mounted() {
this.city();
},
};
</script>
<style>
div {
word-break: break-all;
}
</style>
|