101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<div :style="{width:'100%',height:height}">
|
||
|
|
<div class="divBtn" @click="getLoalcationPoint">
|
||
|
|
<uni-icons custom-prefix="iconfont" type="icon-ebikedingwei2" color="#6f7777" size="16" />
|
||
|
|
<div>定位</div>
|
||
|
|
</div>
|
||
|
|
<map id="mapRef" ref="mapRef" show-location :style="{width:'100%',height:height}" :scale="scale"
|
||
|
|
:longitude="longitude" :latitude="latitude" :markers="markers" @tap="ontap" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import QQMapWX from "qqmap-wx-jssdk";
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
onMounted,
|
||
|
|
getCurrentInstance
|
||
|
|
} from "vue";
|
||
|
|
import * as map from "@/utils/map.js";
|
||
|
|
import {
|
||
|
|
findIndex
|
||
|
|
} from "lodash";
|
||
|
|
|
||
|
|
var qqmapsdk = new QQMapWX({
|
||
|
|
key: map.sdkKey
|
||
|
|
});
|
||
|
|
|
||
|
|
const {
|
||
|
|
lng,
|
||
|
|
lat,
|
||
|
|
height
|
||
|
|
} = defineProps(["lng", "lat", "height"]);
|
||
|
|
const emit = defineEmits(["change"]);
|
||
|
|
|
||
|
|
const mapRef = ref("mapRef");
|
||
|
|
let oMap = null;
|
||
|
|
const latitude = ref(lat);
|
||
|
|
const longitude = ref(lng);
|
||
|
|
const scale = ref(15);
|
||
|
|
const point = lng && lat ? [map.addMarker(1, lng, lat, "point.png")] : null;
|
||
|
|
const markers = ref(point);
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
oMap = map.getMap("mapRef", getCurrentInstance());
|
||
|
|
});
|
||
|
|
|
||
|
|
const ontap = (e) => {
|
||
|
|
const {
|
||
|
|
detail: {
|
||
|
|
latitude: lat,
|
||
|
|
longitude: lng
|
||
|
|
}
|
||
|
|
} = e;
|
||
|
|
changPoint(lng, lat);
|
||
|
|
}
|
||
|
|
|
||
|
|
const getLoalcationPoint = () => {
|
||
|
|
map.getLoalcation(oMap, (res) => {
|
||
|
|
const {
|
||
|
|
longitude: lng,
|
||
|
|
latitude: lat
|
||
|
|
} = res;
|
||
|
|
latitude.value = lat;
|
||
|
|
longitude.value = lng;
|
||
|
|
changPoint(lng, lat);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const changPoint = (lng, lat) => {
|
||
|
|
const arrPoint = markers.value;
|
||
|
|
let index = findIndex(arrPoint, {
|
||
|
|
id: 1
|
||
|
|
});
|
||
|
|
index = index == -1 ? arrPoint.length : index;
|
||
|
|
arrPoint[index] = map.addMarker(1, lng, lat, "point.png");
|
||
|
|
markers.value = arrPoint;
|
||
|
|
map.reverseGeocoder(qqmapsdk, lng, lat, (res) => {
|
||
|
|
emit('change', res);
|
||
|
|
}, (res) => {
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.divBtn {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 100;
|
||
|
|
top: 50%;
|
||
|
|
left: 10px;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 5px;
|
||
|
|
width: 40px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 12px;
|
||
|
|
padding: 10px 5px;
|
||
|
|
border: 1px solid #80808061;
|
||
|
|
}
|
||
|
|
</style>
|