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.15plugins: ['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, {  //设置地图容器idviewMode: "3D",    //是否为3D地图模式zoom: 14,           //初始化地图级别center: [lng, lat], //初始化地图中心点位置mapStyle: 'amap://styles/normal'});const position = new AMap.LngLat(lng, lat);//构建信息窗体中显示的内容var info = [];info.push("电话 : 1234567");info.push('
')info.push("地址 :天安门广场 ");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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！