|
|
<template>
|
|
|
<view>
|
|
|
<map
|
|
|
style="width: 100%; height:250px;"
|
|
|
:latitude="latitude"
|
|
|
:longitude="longitude"
|
|
|
:markers="marker"
|
|
|
:scale="scale"
|
|
|
:circles="circles"
|
|
|
>
|
|
|
<!-- :circles="circles" -->
|
|
|
</map>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { geoDistance } from '@/common/util/util.js'
|
|
|
import amap from "@/common/js-sdk/js-amap/amap-wx.js";
|
|
|
// #ifdef H5
|
|
|
import AMap from "@/common/js-sdk/js-amap/amap-h5.js";
|
|
|
// #endif
|
|
|
|
|
|
export default {
|
|
|
props:{
|
|
|
compLatitude:{
|
|
|
type:Number,
|
|
|
default:40.009390,
|
|
|
required:false
|
|
|
},
|
|
|
compLongitude:{
|
|
|
type:Number,
|
|
|
default:116.374322,
|
|
|
required:false
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
amapPlugin:null,
|
|
|
wxMapKey:"53324ee357405c4a65f35a1aa05ffaf2",
|
|
|
id:0,
|
|
|
title: 'map',
|
|
|
distance:0,
|
|
|
address:"",
|
|
|
latitude: this.compLatitude, //纬度
|
|
|
longitude: this.compLongitude, //经度
|
|
|
scale:16,//地图缩放程度
|
|
|
tipText:'打卡范围',
|
|
|
bgColor:'#00c16f',
|
|
|
marker: [],
|
|
|
circles:[{//在地图上显示圆
|
|
|
latitude: this.compLatitude,
|
|
|
longitude: this.compLongitude,
|
|
|
radius:80,//半径
|
|
|
fillColor:"#ffffffAA",//填充颜色
|
|
|
color:"#55aaffAA",//描边的颜色
|
|
|
strokeWidth:1//描边的宽度
|
|
|
}],
|
|
|
resAmap:null
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
// #ifdef MP-WEIXIN || APP-PLUS
|
|
|
this.amapPlugin = new amap.AMapWX({
|
|
|
key: this.wxMapKey
|
|
|
});
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef H5
|
|
|
this.initAMap()
|
|
|
// #endif
|
|
|
},
|
|
|
mounted() {
|
|
|
// #ifdef MP-WEIXIN
|
|
|
this.getAuthorizeInfo();
|
|
|
// #endif
|
|
|
// #ifdef APP-PLUS
|
|
|
this.getLocationInfoWx();
|
|
|
// #endif
|
|
|
// #ifdef H5
|
|
|
//this.getLocationInfo()
|
|
|
// #endif
|
|
|
},
|
|
|
computed:{
|
|
|
inCircle(){
|
|
|
return this.address && this.distance <= 80
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
allowed(){
|
|
|
return this.inCircle
|
|
|
},
|
|
|
getMyAddress(){
|
|
|
return this.address
|
|
|
},
|
|
|
refreshLocation(){
|
|
|
// #ifdef MP-WEIXIN
|
|
|
this.getAuthorizeInfo();
|
|
|
// #endif
|
|
|
// #ifdef APP-PLUS
|
|
|
this.getLocationInfoWx();
|
|
|
// #endif
|
|
|
// #ifdef H5
|
|
|
this.initAMap()
|
|
|
// #endif
|
|
|
},
|
|
|
getAuthorizeInfo(){
|
|
|
//1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
|
|
|
var _this=this;
|
|
|
uni.authorize({
|
|
|
scope: "scope.userLocation",
|
|
|
success() { //1.1 允许授权
|
|
|
_this.getLocationInfoWx();
|
|
|
},
|
|
|
fail(){ //1.2 拒绝授权
|
|
|
console.log("你拒绝了授权，无法获得周边信息")
|
|
|
_this.openConfirm();
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
getLocationInfoWx(){
|
|
|
var that=this;
|
|
|
this.amapPlugin.getRegeo({
|
|
|
type: 'gcj02', //map 组件使用的经纬度是国测局坐标， type 为 gcj02
|
|
|
success: function(res) {
|
|
|
console.log("success",res);
|
|
|
that.latitude = res[0].latitude;
|
|
|
that.longitude = res[0].longitude;
|
|
|
that.address = res[0].name + res[0].desc;
|
|
|
that.distance=geoDistance(that.longitude, that.latitude,that.compLongitude,that.compLatitude)
|
|
|
console.log("that.distance",that.distance);
|
|
|
let tipText=(that.distance>80?"未在":"已在")+"打卡范围内";
|
|
|
let bgColor=that.distance>80?"#ff0000":"#00c16f";
|
|
|
let marker={
|
|
|
id:0,
|
|
|
latitude:that.latitude,//纬度
|
|
|
longitude:that.longitude,//经度
|
|
|
iconPath: '/static/location.png',
|
|
|
width:35,
|
|
|
height:35,
|
|
|
// #ifdef MP-WEIXIN
|
|
|
label:{//为标记点旁边增加标签
|
|
|
content:tipText,//文本
|
|
|
color:'#ffffff',//文本颜色
|
|
|
fontSize:14,//文字大小
|
|
|
borderWidth:2,//边框宽度
|
|
|
borderColor:bgColor,//边框颜色
|
|
|
bgColor:bgColor,//背景颜色
|
|
|
borderRadius:2,//边框圆角
|
|
|
padding:5,//文本边缘留白
|
|
|
textAlign:'center',//文本对齐方式
|
|
|
x:0,//label的坐标，原点是 marker 对应的经纬度
|
|
|
y:0,//label的坐标，原点是 marker 对应的经纬度
|
|
|
},
|
|
|
// #endif
|
|
|
// #ifdef APP-PLUS
|
|
|
callout:{//自定义标记点上方的气泡窗口 点击有效
|
|
|
content:tipText,//文本
|
|
|
color:'#ffffff',//文字颜色
|
|
|
fontSize:14,//文本大小
|
|
|
//borderRadius:2,//边框圆角
|
|
|
bgColor:bgColor,//背景颜色
|
|
|
display:'ALWAYS',//常显
|
|
|
textAlign:'center'
|
|
|
},
|
|
|
// #endif
|
|
|
}
|
|
|
that.marker=[marker];
|
|
|
},
|
|
|
fail: (res) => {
|
|
|
console.log(JSON.stringify(res));
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
getLocationInfo() {
|
|
|
var _this=this;
|
|
|
uni.showLoading({
|
|
|
title: '获取信息中',
|
|
|
mask:true
|
|
|
});
|
|
|
uni.getLocation({
|
|
|
//type: 'wgs84',
|
|
|
type:'gcj02',
|
|
|
success: function (res) {
|
|
|
console.log('当前位置的经度：' + res.longitude);
|
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|
|
_this.distance=geoDistance(res.longitude, res.latitude,_this.compLongitude,_this.compLatitude)
|
|
|
let tipText=(_this.distance>80?"未在":"已在")+"打卡范围内";
|
|
|
let bgColor=_this.distance>80?"#ff0000":"#00c16f";
|
|
|
_this.longitude=res.longitude
|
|
|
_this.latitude=res.latitude
|
|
|
let marker={
|
|
|
latitude: res.latitude,//纬度
|
|
|
longitude:res.longitude,//经度
|
|
|
callout:{//自定义标记点上方的气泡窗口 点击有效
|
|
|
content:tipText,//文本
|
|
|
color:'#ffffff',//文字颜色
|
|
|
fontSize:14,//文本大小
|
|
|
borderRadius:2,//边框圆角
|
|
|
bgColor:bgColor,//背景颜色
|
|
|
display:'ALWAYS'//常显
|
|
|
}
|
|
|
}
|
|
|
_this.marker=[marker];
|
|
|
},
|
|
|
fail: function (res){
|
|
|
console.log('getLocation==> fail：' + res);
|
|
|
console.log(res);
|
|
|
}
|
|
|
});
|
|
|
uni.hideLoading();
|
|
|
},
|
|
|
// 当用户第一次拒绝后再次请求授权
|
|
|
openConfirm(){
|
|
|
uni.showModal({
|
|
|
title: '请求授权当前位置',
|
|
|
content: '需要获取您的地理位置，请确认授权',
|
|
|
success: (res)=> {
|
|
|
if (res.confirm) {
|
|
|
uni.openSetting();// 打开地图权限设置
|
|
|
} else if (res.cancel) {
|
|
|
uni.showToast({
|
|
|
title: '你拒绝了授权，无法获得位置信息',
|
|
|
icon: 'none',
|
|
|
duration: 1000
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
// 根据坐标返回地址(逆地理编码)
|
|
|
/* async getAddress (points) {
|
|
|
try {
|
|
|
this.resAmap = await AMap();
|
|
|
this.$nextTick(function() {
|
|
|
this.resAmap.plugin('AMap.Geocoder', () => {
|
|
|
var geocoder = new this.resAmap.Geocoder({
|
|
|
radius: 1000,
|
|
|
});
|
|
|
geocoder.getAddress(points, (status, result) => {
|
|
|
if (status === 'complete' && result.regeocode) {
|
|
|
this.address = result.regeocode.formattedAddress
|
|
|
}
|
|
|
})
|
|
|
});
|
|
|
})
|
|
|
} catch (e) {
|
|
|
console.log(e)
|
|
|
}
|
|
|
}, */
|
|
|
// #ifdef H5
|
|
|
async initAMap() {
|
|
|
try {
|
|
|
uni.showLoading({
|
|
|
title: '定位中...',
|
|
|
mask:true
|
|
|
});
|
|
|
this.resAmap = await AMap();
|
|
|
this.$nextTick(function() {
|
|
|
this.resAmap.plugin('AMap.Geolocation', () => {
|
|
|
var geolocation = new this.resAmap.Geolocation({
|
|
|
enableHighAccuracy: true, //是否使用高精度定位，默认:true
|
|
|
timeout: 10000, //超过10秒后停止定位，默认：5s
|
|
|
buttonPosition: 'RB', //定位按钮的停靠位置
|
|
|
// buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
|
|
|
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
|
|
|
|
|
|
});
|
|
|
geolocation.getCurrentPosition(function(status, result) {
|
|
|
if (status == 'complete') {
|
|
|
onComplete(result)
|
|
|
} else {
|
|
|
onError(result)
|
|
|
}
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
//解析定位结果
|
|
|
var _this = this;
|
|
|
|
|
|
function onComplete(data) {
|
|
|
console.log("H5高德定位",data)
|
|
|
console.log('当前位置的经度：' + data.position.lat);
|
|
|
console.log('当前位置的纬度：' + data.position.lng);
|
|
|
_this.distance=geoDistance(data.position.lng, data.position.lat,_this.compLongitude,_this.compLatitude)
|
|
|
let tipText=(_this.distance>80?"未在":"已在")+"打卡范围内";
|
|
|
let bgColor=_this.distance>80?"#ff0000":"#00c16f";
|
|
|
_this.longitude=data.position.lng
|
|
|
_this.latitude=data.position.lat
|
|
|
_this.address=data.formattedAddress
|
|
|
let marker={
|
|
|
latitude: _this.latitude,//纬度
|
|
|
longitude:_this.longitude,//经度
|
|
|
callout:{//自定义标记点上方的气泡窗口 点击有效
|
|
|
content:tipText,//文本
|
|
|
color:'#ffffff',//文字颜色
|
|
|
fontSize:14,//文本大小
|
|
|
borderRadius:2,//边框圆角
|
|
|
bgColor:bgColor,//背景颜色
|
|
|
display:'ALWAYS'//常显
|
|
|
}
|
|
|
}
|
|
|
_this.marker=[marker];
|
|
|
uni.hideLoading();
|
|
|
_this.$tip.success("定位成功")
|
|
|
}
|
|
|
|
|
|
function onError(data) {
|
|
|
console.log(data) // 定位失败的信息
|
|
|
}
|
|
|
|
|
|
})
|
|
|
} catch (e) {
|
|
|
console.log(e)
|
|
|
_this.$tip.alert("定位失败")
|
|
|
}
|
|
|
},
|
|
|
// #endif
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
</style>
|
