ebike-ui/ebike-user/pages/map/map-location.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 AMapWX from "@/utils/amap-wx.130.js";
import { ref, onMounted, getCurrentInstance } from "vue";
import * as map from "@/utils/usermap.js";
import { findIndex } from "lodash";

var amapsdk = new AMapWX({
  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((res) => {
    const { longitude: lng, latitude: lat } = res;
    latitude.value = lat;
    longitude.value = lng;
    changPoint(lng, lat);
    oMap.moveToLocation();
  });
};

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(
    amapsdk,
    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>