腾讯地图输入地址标点与标点后回显地址vue3

一、第一步需要去腾讯注册获取key值

腾讯位置服务 - 立足生态，连接未来

如图创建完成后找到项目的index.html文件

<script src="https://map.qq.com/api/gljs?v=1.exp&key=你的key&libraries=service"></script>

&libraries=service //这个加上的目的是通过输入地址解析成经纬度然后地图上主动标点

不加会报错

而且需要在腾讯地图官网配置额度。

<template>
  <el-dialog
    v-model="visibleDialog"
    title="选择位置"
    width="50%"
    @open="dialogOpen"
    :before-close="handleBeforeClose"
  >
    <el-form inline >
      <el-form-item label="详细地址：" style="width: 400px">
        <el-input
          placeholder="请输入详细地址"
          v-model="address"
          style="margin-bottom: 12px; width: 400px"
          clearable
        ></el-input>
      </el-form-item>

      <el-button type="primary" @click="inputChange" style="float: right"
        >确定</el-button
      >
      <div class="map" id="tx_map_d"></div>
    </el-form>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleBeforeClose">取消</el-button>
        <el-button type="primary" @click="mapSelectChange"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

import { ElMessage } from "element-plus";
import { jsonp } from "vue-jsonp";

const map = ref(null); //地图
const marker = ref(null); //标记点
const mapCenter = ref(new TMap.LatLng(30.593354, 114.304569)); //中心点（北京）
const markerGeometries = ref([]); //标记点
const markerPoint = ref([]); //标记点经纬度

const mapDialogRef = ref();

const addMarker = (evt) => {
  let lat = evt.latLng.getLat(); //lat 获取
  let lng = evt.latLng.getLng(); //lng 获取
  new TMap.service.Geocoder()
    .getAddress({ location: new TMap.LatLng(lat, lng) })
    .then((result) => {
      address.value = result.result.address;
    })
    .catch((err) => {
      ElMessage({
        message: err.message,
        type: "error",
      });
    });

  markerGeometries.value = [
    {
      position: new TMap.LatLng(evt.latLng.getLat(), evt.latLng.getLng()),
    },
  ];
  markerPoint.value = [evt.latLng.getLat(), evt.latLng.getLng()];
  mapCenter.value = new TMap.LatLng(evt.latLng.getLat(), evt.latLng.getLng());
  map.value.setCenter(mapCenter.value);
  setMarker(markerGeometries.value);
};

const setMarker = (point) => {
  //重置标记点
  if (marker.value) {
    marker.value.setMap(null); //清空标记点
  }
  marker.value = new TMap.MarkerCluster({
    id: "cluster",
    map: map.value,
    enableDefaultStyle: true, // 启用默认样式
    minimumClusterSize: 2, // 形成聚合簇的最小个数
    geometries: point,
    zoomOnClick: true, // 点击簇时放大至簇内点分离
    gridSize: 60, // 聚合算法的可聚合距离
    averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
    maxZoom: 10, // 采用聚合策略的最大缩放级别
  });
};

const dialogOpen = () => {
  initMap();
};

const emit = defineEmits(["mapConfirm"]);
const handleBeforeClose = () => {
  visibleDialog.value = false;
  markerGeometries.value = [];
  markerPoint.value = [];
  address.value = "";
};
const mapSelectChange = () => {
  emit("mapConfirm", address.value, markerPoint.value);
  handleBeforeClose();
};
const initMap = () => {
  //定义地图中心点坐标
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  if (!map.value) {
    map.value = new TMap.Map(document.getElementById("tx_map_d"), {
      center: mapCenter.value, //设置地图中心点坐标
      zoom: 15, //设置地图缩放级别  4.5：全国  8：省  12：市  15：区
    });
  }
  map.value.setCenter(mapCenter.value);
  map.value.setZoom(15);

  if (marker.value) {
    marker.value.setMap(null); //清空标记点
  }
  if (!!markerGeometries.value) {
    // 创建点标记
    setMarker(markerGeometries.value);
  }
  map.value.on("click", addMarker);
};

const inputChange = () => {
  const url = "https://apis.map.qq.com/ws/geocoder/v1/";
  jsonp(url, {
    key: "3WDBZ-HMUCX-NIE43-ZPLQ4-OOHAO-OKBES",
    output: "jsonp",
    address: address.value,
  })
    .then((res) => {
      const { lat, lng } = res.result.location;
      console.log(lat, lng);
      
      mapCenter.value = new TMap.LatLng(lat, lng);
      markerGeometries.value = [
        {
          position: new TMap.LatLng(lat, lng),
        },
      ];
      map.value.setCenter(mapCenter.value); //设置中心点
      setMarker(markerGeometries.value); //设置标记点
    })
    .catch(() => {
      console.log('00');
      
    });
};