This blog is based on Tencent Classroom Teacher Wu "VueCli3 Actual Combat Project-Restoring Ele.me Ordering App (SMS Verification Code Login and Gaode Positioning)". The lectures are very good, if you want to learn, welcome to join.
1. Gaode map positioning to achieve precise positioning
Gaode Maps Developer Platform ;
first you need to register your account password and log in. After the
registration is successful, select the personal center-create a new application, add the key value and
add it to the index.html of vue
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.13&key=你自己的key值"
></script>
We want to achieve precise positioning when you open the app, so we add a method in App.vue
<script>
export default {
name:'app',
created(){
this.getLocation();
},
methods:{
getLocation() {
// 移动端
// 移动端包括手机，pad和其它带有GPS定位芯片的智能设备（如手表、音箱等），移动端的系统包括iOS和Android。成功完成定位需要达成以下前提条件：
// （1）系统GPS打开
// （2）所使用的App或浏览器已获取定位权限
// （3）对打开的页面允许使用定位
// （4）对于iOS10以上系统和Android的一些版本已禁止在非HTTPS协议的域名下定位，请尽快将站点升级到HTTPS
// 注意，以上只是定位成功的前提条件，满足这些并不一定等于可以成功定位，定位还与当前位置（室内会影响GPS信息）、手机信号和定位权限等因素影响。如果您在使用过程中定位失败，可以参考FAQ：Geolocation的定位流程以及定位失败的原因 ，将失败信息通过工单发送给我们，高德的工程师将协助您解决问题。
// PC
// 因为pc设备上大都缺少GPS芯片，所以在PC上的定位主要通过IP精准定位服务，该服务的失败率在5%左右。所以我们用反定位处理，这个定位为非精准定位，但是只是很少的人会遇到这种情况
const self = this;
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默认：true
enableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
// buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
// zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
// buttonPosition: 'RB'
})
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, 'complete', onComplete)
AMap.event.addListener(geolocation, 'error', onError)
function onComplete (data) {
// data是具体的定位信息
console.log(data);
}
function onError (data) {
// 定位出错
//console.log(data);
self.getLngLatLocation();
}
})
},
getLngLatLocation(){
//根据经纬度反定位到地址
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功，result即为当前所在城市信息
console.log(result);
AMap.plugin('AMap.Geocoder', function() {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city:result.adcode
})
var lnglat = result.rectangle.aplit(';')[0].split(",");
geocoder.getAddress(lnglat, function(status, data) {
if (status === 'complete' && data.info === 'OK') {
// result为对应的地理位置详细信息
console.log(data);
}
})
})
}
})
})
}
}
}
</script>
2. Below we talk about the positioning of the page display
Let's manage the address with vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//types
const types = {
SET_LOCATION:"SET_LOCATION",
SET_ADDRESS:"SET_ADDRESS"
}
//state
const state = {
location:{
},
address:""
}
//getters
const getters = {
location: state => state.location,
address: state => state.address
}
//mutations
const mutations= {
[types.SET_LOCATION](state, location){
if (location) {
state.location = location;
} else {
state.location = null;
}
},
[types.SET_ADDRESS](state, address){
if (address) {
state.address = address;
} else {
state.address = '';
}
}
}
//actions
const actions= {
setLocation:({
commit},location)=>{
commit(types.SET_LOCATION,location);
},
setAddress:({
commit},address)=>{
commit(types.SET_ADDRESS,address);
},
}
export default new Vuex.Store({
state,
getters,
mutations,
actions
});
getLocation() {
// 移动端
// 移动端包括手机，pad和其它带有GPS定位芯片的智能设备（如手表、音箱等），移动端的系统包括iOS和Android。成功完成定位需要达成以下前提条件：
// （1）系统GPS打开
// （2）所使用的App或浏览器已获取定位权限
// （3）对打开的页面允许使用定位
// （4）对于iOS10以上系统和Android的一些版本已禁止在非HTTPS协议的域名下定位，请尽快将站点升级到HTTPS
// 注意，以上只是定位成功的前提条件，满足这些并不一定等于可以成功定位，定位还与当前位置（室内会影响GPS信息）、手机信号和定位权限等因素影响。如果您在使用过程中定位失败，可以参考FAQ：Geolocation的定位流程以及定位失败的原因 ，将失败信息通过工单发送给我们，高德的工程师将协助您解决问题。
// PC
// 因为pc设备上大都缺少GPS芯片，所以在PC上的定位主要通过IP精准定位服务，该服务的失败率在5%左右。所以我们用反定位处理，这个定位为非精准定位，但是只是很少的人会遇到这种情况
const self = this;
AMap.plugin('AMap.Geolocation', function() {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位，默认：true
enableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
// buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
// zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
// buttonPosition: 'RB'
})
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, 'complete', onComplete)
AMap.event.addListener(geolocation, 'error', onError)
function onComplete (data) {
// data是具体的定位信息
// console.log(data);
//修改开始
self.$store.dispatch("setLocation",data);
self.$store.dispatch("setAddress",data.formattedAddress);
//修改结束
}
function onError (data) {
// 定位出错
//console.log(data);
self.getLngLatLocation();
}
})
},
getLngLatLocation(){
const self = this;
//根据经纬度反定位到地址
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch()
citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功，result即为当前所在城市信息
console.log(result);
AMap.plugin('AMap.Geocoder', function() {
var geocoder = new AMap.Geocoder({
// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
city:result.adcode
})
var lnglat = result.rectangle.aplit(';')[0].split(",");
geocoder.getAddress(lnglat, function(status, data) {
if (status === 'complete' && data.info === 'OK') {
// result为对应的地理位置详细信息
//console.log(data);
//修改开始
self.$store.dispatch("setLocation",{
addressComponent: {
city: result.city,
province: result.province
},
formattedAddress: data.regeocode.formattedAddress
});
self.$store.dispatch("setAddress",data.regeocode.formattedAddress);
//修改结束
}
})
})
}
})
})
}
}
Inside Home.vue
<template>
<div class="home">
<div class="header">
<div class="address_map">
<i class="fa fa-map-marker"></i>
<span>{
{
address}}</span>
<i class="fa fa-sort-desc"></i>
</div>
<div class="shop_search">
<i class="fa fa-search"></i>
搜索商家 商家名称
</div>
</div>
</div>
</template>
<script>
export default {
name:'home',
computed:{
address(){
return this.$store.getters.address
}
}
}