Vue 3+ts +天地图点击地图获取详细位置

VUE3中如何使用天地图

在index.html的头部引入，注意VUE3版本必须采用JavaScript API 4.0版本的API不然会导致地图加载不出来。

<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的秘钥"></script>

加载天地图

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。将div元素的宽和高分别设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。

<template>
  <div>
    <el-input v-model="input" disabled placeholder="请选择" />
    <div class="map-containera" id="map-containera">
      <div id="searchResultPanel" style="border: 1px solid #c0c0c0; width: 150px; height: auto; display: none"></div>
    </div>
  </div>
</template>

创建地图实例

<script setup lang="ts">
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
const { proxy }: any = getCurrentInstance();
onMounted(() => {
  nextTick(() => {
    onLoad();
  });
});
const input = ref('');
var map: any = null;
const siteInfo = {
  longitude: '',
  address:'',
  latitude: ''
};
var map;
var zoom = 12;
var geocode: any;
const T = (window as any).T;
const onLoad = () => {
  //初始化地图对象
  map = new T.Map('map-containera');
  //设置显示地图的中心点和级别
  map.centerAndZoom(new T.LngLat(113.84582519531251, 34.039004679044446), zoom);
  //允许鼠标滚轮缩放地图
  console.log(map);
  map.enableScrollWheelZoom();
  //允许双击地图放大
  map.enableDoubleClickZoom();
  //创建对象
  geocode = new T.Geocoder();
  //监听鼠标点击事件
  console.log(T.Event);
  map.addEventListener('click', (val: any) => {
    // 经纬度
    siteInfo.longitude = val.lnglat.lng.toFixed(2);
    siteInfo.latitude = val.lnglat.lat.toFixed(2);
    
    let point = [val.containerPoint.x, val.containerPoint.y];
    var lnglat = map.containerPointToLngLat(point);
    geocode.getLocation(lnglat, searchResult);
  });
};
const searchResult = (result: any) => {
  if (result.getStatus() == 0) {
    siteInfo.address = result.getAddress()
    ElMessage.success('已选取经纬度');
    var addressComponent = result.getAddressComponent();
    emit('getAddress', siteInfo);
  } else {
    result.getMsg();
  }
};
const emit = defineEmits(['getAddress', 'delete', 'closePop']);
</script>

样式

<style lang="scss" scoped>
.map-containera {
  width: 100%;
  height: 732px;

  #map-containera {
    width: 100%;
    height: 500px;
    margin-top: 10px;
  }

  .map-modal-title {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 10px;

    .long-lat-item {
      margin-left: 10px;

      > span {
        padding-right: 5px;
      }

      .ivu-input-wrapper {
        margin-right: 5px;
      }
    }
  }
}

在项目中使用

注册全局组件

在main.ts中注册组件

import { createApp } from 'vue';
import App from './App.vue';
import router from './router/router';
import ElementPlus from 'element-plus';
import zhLang from 'element-plus/lib/locale/lang/zh-cn'
import 'element-plus/dist/index.css';
import './css/index.scss'
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { createPinia } from "pinia";

import myMap from '@/components/myMap/index.vue'

const app = createApp(App);

app.use(router);
app.use(store);
app.use(ElementPlus,{locale:{...zhLang,...locale}});
app.use(pinia);
app.component('myMap',myMap)

app.mount('#app');
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

在项目中使用组件

<template>
  <my-window
    ref="addModify"
    :title="'地图'"
    :show="popShow"
    :full="true"
    :customFooter="true"
    @handleOk="LOSEDIA()"
    @close="LOSEDIA()"
    :customClass="'diaBodyFull'"
  >
    <template #custom>
      <my-map @getAddress="getAddress"></my-map>
    </template>
  </my-window>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, nextTick } from 'vue';
const props = defineProps<{
  popShow: boolean;
}>();
watch(
  () => props.popShow,
  (newData, oldData) => {}
);
const LOSEDIA = () => {
  emit('closePop');
};
const getAddress = (val: any) => {
  emit('getAddress', val);
};
const emit = defineEmits(['getAddress', 'delete', 'closePop']);
</script>

示例展示