vue3使用天地图完成经纬度以及位置信息回显

一、天地图官网中申请key

登录之后点击控制台=>创建应用=>选择浏览器端就可以看到申请的key

项目中index.html的body中引入

<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"></script>

二、组件(markerMap.vue) 直接复制即可

<template>
  <div id="map"
           class="map radius-md"
           style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import { nextTick, watch } from "vue";

const map = ref(null);
const props = defineProps({
  lng: {
    type: Number,
    default: 117.226367
  },
  lat: {
    type: Number,
    default: 39.089812
  },
  addressName: {
    type: String,
    default: ''
  }
})


watch(() => [props.addressName, props.lng, props.lat], ()=>{
  nextTick(()=>{
    initMap();
  })
})

const initMap = () => {
  const T = window.T;
  //   // 坐标
  map.value = new T.Map("map",{
    enableDrag: true,
    projection: 'EPSG:4326'
  });
  let point = new T.LngLat(props.lng, props.lat);
  map.value.centerAndZoom(point, 17);
   //创建标注对象
   var marker = new T.Marker(point);
            //向地图上添加标注
            map.value.addOverLay(marker);
              //创建信息窗口对象
              var markerInfoWin = new T.InfoWindow(props.addressName);
              marker.openInfoWindow(markerInfoWin);
            marker.addEventListener("click", function () {
                marker.openInfoWindow(markerInfoWin);
            });// 将标注添加到地图中
};

</script>

<style scoped lang="scss">

</style>

三、页面使用

<template>
  <div>
   
      <div style="width: 100%; height: 200px;">
        <markerMap :lat="39.905506"
                 :lng="116.391288"
                 addressName="北京市东城区长安街天安门广场"></markerMap>
                 
      </div>
  </div>
</template>

<script setup>
import markerMap from "@/components/map/tdt/markerMap.vue";

</script>

<style scoped lang="scss">
 
</style>

四、示例