Three methods of positioning
At present, web page positioning is using browser positioning, Gaode map positioning, Baidu map positioning, I have tried both browser and Gaode, it is possible on Firefox, but not on Google browser, the official explanation of Gaode map is :
The positioning interface of some browsers (such as Google Chrome, etc.) is a black hole, and there is no response at all through its positioning request, and it will also return failure after timeout.
vue Get the latitude and longitude of the current location (browser positioning)
Use Gaode map in vue to get and locate
my webpage, which needs to be placed in the Android app, because the Android webview is the Google core, so it will not support it, and finally I used Baidu map , found that it is possible for
Vue to realize city positioning (using Baidu map
There is a change on my side, and I need to convert to a specific address based on latitude and longitude. You need to apply for ak first, see the official document
JavaScript API GL
to introduce Baidu's reference in index.html under the public folder
<!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>
in vue.config.js
//压缩打包文件大小
configureWebpack: (config) => {
config.externals = {
"BMap": 'BMap'
where it needs to be positioned. Used in 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>