Vue3使用腾讯地图

index.html

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=your key"></script>

MapContainer.vue

<!-- 将高德地图转成腾讯地图 -->


<template>
  <a-select v-model:value="addressValue" show-search placeholder="请输入详细地址" :default-active-first-option="false"
    :show-arrow="false" style="width: 100%" :filter-option="false" :fieldNames="{ label: 'address', value: 'id' }"
    :not-found-content="searchValueObj.fetching ? undefined : null" :options="searchValueObj.data" @search="toSearch"
    @change="handleChange">
    <template v-if="searchValueObj.fetching" #notFoundContent>
      <a-spin size="small" />
    </template>
  </a-select>
  <div id="myMap" class="myMap"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, defineExpose, reactive } from "vue";
import { debounce } from 'lodash-es';
import { useRoute, useRouter } from "vue-router";

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['handleChange'])

const route = useRoute();
const router = useRouter();

const container = ref(null)
const lasMarker = ref(null)
const locationCurrent = ref({})
let placeSearch = {}
let map = {}
let searchValueObj = reactive({
  data: [],
  fetching: false,
})
const addressValue = ref(undefined)
// 初始化地图
const initMap = () => {
  let center = new qq.maps.LatLng(39.916527, 116.397128);
  const type = route.params.type
  const id = route.params.id
  const options = {
    zoom: 16,
    mapTypeId: qq.maps.MapTypeId.ROADMAP,
    viewMode: '2D',
    disableDefaultUI: true
  }
  map = new qq.maps.Map(document.getElementById('myMap'), options);
  // 如果是新增的话获取当前位置
  if (type === 'edit') {
    // 详情
    Core.Api.Merchant.detail({
      page: [id]
    }).then(res => {
      // debugger
      console.log(res, '详情')
      const { latitude, longitude, address } = res
      const currentLocation = new qq.maps.LatLng(latitude, longitude);
      setMapMarker(currentLocation)
      setCurrentAddress(address, { lat: latitude, lng: longitude })
    })
  } else {
    // 如果是新增使用当前位置
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        const { latitude, longitude } = position.coords;
        const currentLocation = new qq.maps.LatLng(latitude, longitude);
        setMapMarker(currentLocation)
        setCurrentAddress(undefined, { lat: latitude, lng: longitude })
      });
    }
  }
  // 如果是编辑回显详情位置
}
// 搜索功能
const toSearch = debounce((value) => {
  if (value) {
    searchValueObj.fetching = true
    // 请求后端接口
    后端接口({
      path: 'ws/place/v1/suggestion',
      method: 'GET',
      enableCache: true,
      param: {
        keyword: value
      }
    }).then(res => {
      searchValueObj.fetching = false
      searchValueObj.data = res.data
    })
  }
}, 300);

// 选中地址 设置当前点位
const handleChange = (changeValue, object) => {
  const { lat, lng } = object.location
  setCurrentAddress(object.address, object.location)
  const mapsObject = new qq.maps.LatLng(lat, lng)
  setMapMarker(mapsObject)
}
// 放置地图点位
const setMapMarker = (locationObj) => {
  // 先清空点位再设置点位
  // map.setMap(null)
  map.setCenter(locationObj)
  let marker = new qq.maps.Marker({
    position: locationObj,
    map: map,
    draggable: true
  });
  let anchor = new qq.maps.Point(0, 39),
    size = new qq.maps.Size(42, 68),
    origin = new qq.maps.Point(0, 0),
    markerIcon = new qq.maps.MarkerImage(
      "https://3gimg.qq.com/lightmap/api_v2/2/4/99/theme/default/imgs/marker.png",
      size,
      origin,
      anchor
    );
  marker.setIcon(markerIcon)
  qq.maps.event.addListener(marker, 'dragend', changeAddress);
}

// 拖曳点位并且获取地址 逆地址编码
const changeAddress = (location) => {
// 请求后端接口
后端接口({
    path: 'ws/geocoder/v1/',
    method: 'GET',
    enableCache: true,
    param: {
      location: location.latLng.lat + ',' + location.latLng.lng,
    }
  }).then(res => {
    setCurrentAddress(res.result.address, res.result.location)
  })
}

// 设置地址放置当前点位
const setCurrentAddress = (address, location) => {
  addressValue.value = address
  locationCurrent.value = location
  // 抛出
  emits('locationAddress', { address, location })
}
// 处理回显
const mapPreview = (val) => {
};
onMounted(() => {
  initMap();
});
onUnmounted(() => {
});
</script>



<style scoped>
.myMap {
  /*地图(容器)显示大小*/
  width: 100%;
  height: 215px;
}

.rowmap {
  margin-bottom: 24px;
}

.mapcon {
  height: 215px;
}
</style>