ポジショニングの3つの方法
現在、Web ページの配置はブラウザの配置、Gaode マップの配置、Baidu マップの配置を使用しています。ブラウザと Gaode の両方を試しました。Firefox では可能ですが、Google ブラウザでは可能ではありません。Gaode マップの公式説明は次のとおりです。
一部のブラウザー (Google Chrome など) の測位インターフェイスはブラック ホールであり、測位要求に対してまったく応答がなく、タイムアウト後に失敗を返します。
vue 現在の場所の緯度と経度を取得します (ブラウザーの位置)
vue で Gaode マップを使用して、
Android アプリに配置する必要がある自分の Web ページを取得して検索します。Android Web ビューは Google コアであるため、サポートされません。それを調べて、最後に Baidu マップを使用したところ、Vue で都市の測位を実現できることがわかりました
(Baidu マップを使用)
私の側で変更があり、緯度と経度に基づいて特定の住所に変換する必要があります。最初に ak を申請する必要があります。公式ドキュメント
JavaScript API GL を
参照して、パブリック フォルダーの下の index.html で Baidu のリファレンスを紹介してください。
<!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>