vant 4移动组件集成高德地图的实际应用，添加了地图的点击打开手机端的APP应用进行导航功能，其他vue3 的写法也适用

1、安装高德地图包

执行该npm命令，安装 Loader

npm i @amap/amap-jsapi-loader --save

2、创建地图组件，新建一个.vue文件

<template>
  <div class="map" ref="mapRef"></div>
</template>
<style scoped>
.map{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>

3、引入地图loader，初始化创建地图

<template>
    <div class="map" ref="mapRef"></div>
</template>
 <van-popup v-model:show="showPicker" round position="bottom">
      <van-list style="margin-bottom: 10px;">
        <van-cell @click="toMap('gd')" style="text-align: center;" title="高德地图"></van-cell>
     	<van-cell @click="toMap('tx')" style="text-align: center;" title="腾讯地图"></van-cell>
        <van-cell @click="toMap('bd')" style="text-align: center;" title="百度地图"></van-cell>
     </van-list>
</van-popup>
<script setup lang="ts">
import { ref} from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
const showPicker = ref(false);
const selfLat = ref(0);
const selfLng = ref(0);
const mapRef = ref();
window._AMapSecurityConfig = {
    securityJsCode: '「在开发者平台申请的安全密钥」',
}
initMap();
function initMap() {
    AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        AMap.plugin('AMap.Geocoder', function () {   //逆地址解析地名
            var geocoder = new AMap.Geocoder();
            geocoder.getLocation('天安门广场', function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // 经纬度                      
                    var lng = result.geocodes[0].location.lng;
                    var lat = result.geocodes[0].location.lat;
                    selfLng.value = lng;
                    selfLat.value = lat;
                    map.value = new AMap.Map(mapRef.value, {  //设置地图容器id
                        viewMode: "3D",    //是否为3D地图模式
                        zoom: 14,           //初始化地图级别
                        center: [lng, lat], //初始化地图中心点位置
                        mapStyle: 'amap://styles/normal'
                    });
                    const position = new AMap.LngLat(lng, lat);
                    //构建信息窗体中显示的内容
                    var info = [];
                    info.push("<div><span class='input-item' style='color:#000;font-size:12px;'>电话 : 1234567</span>");
                    info.push('<i class="van-badge__wrapper van-icon van-icon-phone" style="color: rgb(25, 137, 250);"></i><br>')
                    info.push("<span  class='input-item' style='color:#000;font-size:12px;'>地址 :天安门广场 <i class='van-badge__wrapper van-icon van-icon-guide-o' style='color: rgb(25, 137, 250);'></i></span></div>");
                    var infoWindow = new AMap.InfoWindow({
                        anchor: 'bottom-center',
                        offset: new AMap.Pixel(0, -30),
                        content: info.join("")  //使用默认信息窗体框样式，显示信息内容
                    });
                    infoWindow.open(map.value, position);
                    //添加信息窗体点击事件
                    infoWindow.on('click',clickHandler);
                    //画地图的点标记
                    const marker = new AMap.Marker({
                        position: position,
                        offset: new AMap.Pixel(0, 0) // 以 icon 的 [center bottom] 为原点
                    });
                    map.value.add(marker);
                    //添加点标记的点击事件
                    marker.on('click', clickHandler);
                } else {
                    console.log('定位失败！');
                }
            });
        })
    }).catch(e => {
        console.log(e);
    })
}
function clickHandler(e) {
    showPicker.value = true;
};
function toMap(gjz: string) {
    const gdRul = 'https://uri.amap.com/marker?position=' + selfLng.value + ',' + selfLat.value;
    const txRul='https://apis.map.qq.com/uri/v1/geocoder?coord=' + selfLat.value + ',' + selfLng.value + '&referer='+申请的腾讯地图开发者的key;
    //百度地图经纬度要转一下，不然误差很大
    const baiduRul = 'http://api.map.baidu.com/marker?location=' +selfLat.value + ',' + selfLng.value + '&title=目的地&output=html';
    if ("tx" == gjz) {
        window.location.href = txRul;
    } else if ("gd" == gjz) {
        window.location.href = gdRul;
    } else {
        window.location.href = baiduRul;
    }
}
</script>
<style scoped>
.map{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>