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>