vue3中实现腾讯地图和高德地图

腾讯地图

1. 新建一个地图组件，TMap.vue

<template>
  <div id="container">
    <tlbs-map
      ref="map"
      api-key="你的key"
      :center="center"
      :zoom="9"
      :control="control"
      @click="onClick"
      style="height: 300px"
    >
      <tlbs-multi-marker
        :geometries="geometries"
        :styles="styles"
        :options="options"
      />
    </tlbs-map>
  </div>
</template>
<script lang="ts" setup>
import request from '@/request';
import { ref, watch } from 'vue';
// npm install 这个
import { jsonp } from 'vue-jsonp';
// 使用组件时传递搜索值，经度值，纬度值过来
const props = defineProps<{
  searchValue: string;
  longitude: number;
  latitude: number;
}>();
const emit = defineEmits<{
  (e: 'data', longitude: number, latitude: number, searchValue: string): void;
}>();
const center = ref({ lat: 39, lng: 116 });
const map = ref(null);
let latitude = ref(39); // 纬度
let longitude = ref(116); // 经度
const searchValue = ref('');
// 标记位置
let geometries = ref([{ styleId: 'marker', position: { lat: 39, lng: 116 } }]);
const control = {
  scale: {},
  zoom: {
    position: 'topRight',
  },
};
const options = {
  renderOptions: {
    renderOptions: true,
  },
};
const styles = {
  marker: {
    width: 20,
    height: 30,
    anchor: { x: 10, y: 30 },
  },
};
// 点击地图
const onClick = (e: any) => {
  latitude.value = e.latLng.lat;
  longitude.value = e.latLng.lng;
  changeCenter({ lat: latitude.value, lng: longitude.value });
};
// 改变地图中心点的位置
const changeCenter = (latLng: { lat: number; lng: number }) => {
  center.value = latLng;
  geometries.value = [
    {
      styleId: 'marker',
      position: { lat: latitude.value, lng: longitude.value },
    },
  ];
  ota();
  emit('data', longitude.value, latitude.value, searchValue.value);
};
// 地址解析，地址转坐标
function ato() {
  const url = 'https://apis.map.qq.com/ws/geocoder/v1/';
  jsonp(url, {
    key: '你的key',
    output: 'jsonp',
    address: searchValue.value,
  }).then((res) => {
    if (res.status === 0) {
      latitude.value = res.result.location.lat;
      longitude.value = res.result.location.lng;
      emit('data', longitude.value, latitude.value, searchValue.value);
    }
  });
}
// 逆地址解析，坐标转地址
async function ota() {
  const InverseAddress = () => {
    return request({
      url:
        'http:localhost:8080/tx/ws/geocoder/v1/?key=你的key&location=' +
        latitude.value +
        ',' +
        longitude.value,
      method: 'GET',
    });
  };
  const res = await InverseAddress();
  if (res.status === 0) {
    searchValue.value = res.result.formatted_addresses
      ? res.result.formatted_addresses.recommend
      : '';
  }
}
watch(
  () => props.searchValue,
  (newVal) => {
    searchValue.value = newVal;
    ato();
  },
  { immediate: true, deep: true }
);
watch(
  () => props.longitude,
  (newVal) => {
    longitude.value = newVal;
    changeCenter({ lat: latitude.value, lng: longitude.value });
  }
);
watch(
  () => props.latitude,
  (newVal) => {
    latitude.value = newVal;
    changeCenter({ lat: latitude.value, lng: longitude.value });
  }
);
</script>
<style scoped>
#container {
  width: 500px;
  height: 300px;
  padding: 0px;
  margin: 0px;
}
</style>

2. 在需要的地方使用TMap组件

<template>
  <a-form
    ref="formRef"
    :model="formState"
    :label-col="{ span: 3 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >
    <a-form-item label="详细地址" name="address">
      <a-input
        placeholder="请输入详细地址"
        v-model:value="formState.address"
        show-count
        :maxlength="250"
      />
    </a-form-item>
    <a-form-item
      label="地址经度"
      name="longitude"
    >
      <a-input
        placeholder="请输入地址经度"
        v-model:value="formState.longitude"
      />
    </a-form-item>
    <a-form-item label="地址纬度" name="latitude">
      <a-input
        placeholder="请输入地址纬度"
        v-model:value="formState.latitude"
      />
    </a-form-item>
    <a-form-item label="地图定位" name="formstate">
      <TMap
        :searchValue="formState.address"
        :latitude="formState.latitude"
        :longitude="formState.longitude"
        @data="getData"
      />
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { ref, reactive} from 'vue';
import TMap from '@/components/map/TMap.vue';
const formRef = ref<Form | null>(null);
const formState = reactive({
  address: '厦门',
  longitude: 116,
  latitude: 39,
});
// 获取地点信息回显
const getData = (lng: any, lat: any, searchValue: any) => {
  formState.longitude = lng;
  formState.latitude = lat;
  formState.address = searchValue;
};
</script>

注意：在使用的时候报错跨域问题的话， 可以在vite.config.ts文件加入这段代码

proxy: {

      '/tx': {

        target: 'https://apis.map.qq.com/',

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/tx/, ''),

      },

},

高德地图

2. 新建一个地图组件，GMap.vue

<template>
  <div id="container"></div>
</template>
<script setup>
import { onUnmounted, watch, defineEmits, ref } from 'vue';
// npm install 这个
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity';
// 使用组件时传递搜索值，经度值，纬度值过来
const props = defineProps({ searchValue: '', lng: 0, lat: 0 });
const emit = defineEmits();
let map = shallowRef(null);
let lng = ref(0);
let lat = ref(0);
const searchValue = ref('');
watch(
  () => props.searchValue,
  (newVal) => {
    searchValue.value = newVal;
    initData();
  },
  { immediate: true },
  { deep: true }
);
watch(
  () => props.lng,
  (newVal) => {
    lng.value = newVal;
    initData();
  }
);
watch(
  () => props.lat,
  (newVal) => {
    lat.value = newVal;
    initData();
  }
);

onUnmounted(() => {
  map?.destroy();
});

function initData() {
  window._AMapSecurityConfig = {
    securityJsCode: '你的安全密钥',
  };
  AMapLoader.load({
    key: '你的key',
    version: '2.0',
    plugins: ['AMap.Scale'],
  })
    .then((AMap) => {
      const layer = new AMap.createDefaultLayer({
        zooms: [3, 20],
        visible: true,
        opacity: 1,
        zIndex: 0,
      });

      let geocoder;
      AMap.plugin('AMap.Geocoder', function () {
        geocoder = new AMap.Geocoder();
      });

      geocoder.getLocation(searchValue.value, function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          var lnglat = result.geocodes[0].location;
          lng.value = lnglat.lng;
          lat.value = lnglat.lat;
          emit('data', lng.value, lat.value, searchValue.value);
          // 地图初始化
          map = new AMap.Map('container', {
            resizeEnable: true,
            viewMode: '3D',
            zoom: 11,
            center: [lng.value, lat.value],
            mapStyle: 'amap://styles/normal',
            layers: [layer],
          });
          map.on('click', function (e) {
            geocoder.getAddress(e.lnglat, function (status, result) {
              marker.position = e.lnglat;
              if (status === 'complete' && result.regeocode) {
                searchValue.value = result.regeocode.formattedAddress;
              }
            });
            lng.value = e.lnglat.lng;
            lat.value = e.lnglat.lat;
            emit('data', lng.value, lat.value, searchValue.value);
          });
          var marker = new AMap.Marker({
            position: lnglat,
            title: searchValue.value,
          });
          marker.setMap(map);
        }
      });
    })
    .catch((e) => {
      console.log(e);
    });
}
</script>
<style scoped>
#container {
  width: 500px;
  height: 300px;
  padding: 0px;
  margin: 0px;
}
</style>

2. 在需要的地方使用GMap组件

<template>
  <a-form
    ref="formRef"
    :model="formState"
    :label-col="{ span: 3 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >
    <a-form-item label="详细地址" name="address">
      <a-input
        placeholder="请输入详细地址"
        v-model:value="formState.address"
        show-count
        :maxlength="250"
      />
    </a-form-item>
    <a-form-item
      label="地址经度"
      name="longitude"
    >
      <a-input
        placeholder="请输入地址经度"
        v-model:value="formState.longitude"
      />
    </a-form-item>
    <a-form-item label="地址纬度" name="latitude">
      <a-input
        placeholder="请输入地址纬度"
        v-model:value="formState.latitude"
      />
    </a-form-item>
    <a-form-item label="地图定位" name="formstate">
      <GMap
        :searchValue="formState.address"
        :latitude="formState.latitude"
        :longitude="formState.longitude"
        @data="getData"
      />
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { ref, reactive} from 'vue';
import TMap from '@/components/map/GMap.vue';
const formRef = ref<Form | null>(null);
const formState = reactive({
  address: '厦门',
  longitude: 116,
  latitude: 39,
});
// 获取地点信息回显
const getData = (lng: any, lat: any, searchValue: any) => {
  formState.longitude = lng;
  formState.latitude = lat;
  formState.address = searchValue;
};
</script>