使用Vue3调用高德地图接口(基于后端同学想搞前端地图的手把手式教程)
2023-12-22 15:37:58
?首先我们先按照官方文档进行操作
安装地图Loader
?npm i @amap/amap-jsapi-loader --save
创建一个vue文件之后
创建地图容器
<template>
<div id="container"></div>
</template>
设置地图容器样式
<style scoped>
#container{
padding:0px;
margin: 0px;
width: 100%;
height: 800px;
}
</style>
引入Loader
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
</script>
初始化Map(基于vue3及setup语法糖)
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {shallowRef} from "vue";
const map = shallowRef(null);
</script>
创建地图并调用初始化方法
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {shallowRef, onMounted} from "vue";
const map = shallowRef(null);
//初始化地图方法
const initMap = ()=>{
AMapLoader.load({
key:"YOURKRY", // 申请好的Web端开发者Key,首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins:[], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
map.value = new AMap.Map("container",{ //设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:5, //初始化地图级别 2-20
center:[105.602725,37.076636], //初始化地图中心点位置
});
}).catch(e=>{
console.log(e);
})
}
//页面挂载完成
onMounted(()=>{
//调用初始化方法
initMap()
})
</script>
效果:
?
添加标记?
?按照官方文档我们知道,创建标记实例需要AMap,而AMap在初始化地图方法里,所以我们需要用一个变量接出来
//备份AMap对象,以便操作
let MYAMap = null
//初始化地图方法
const initMap = ()=>{
AMapLoader.load({
key:"YOURKRY", // 申请好的Web端开发者Key,首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins:[], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
MYAMap = AMap //在这里添加
map.value = new AMap.Map("container",{ //设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:5, //初始化地图级别 2-20
center:[105.602725,37.076636], //初始化地图中心点位置
});
}).catch(e=>{
console.log(e);
})
}
?之后创建标记:
const marker = new MYAMap.Marker({
position: //希望它出现的位置
title: //标记名字
});
//加进地图里
map.value.add(marker)
效果:
给标记创建点击事件并创建信息框?
marker.on('clice',function (e){
//创建并打开一个信息框
var infoWindow = new MYAMap.InfoWindow({
content: '',//在框内显示的内容,传入dom对象或者html字符串
offset: new MYAMap.Pixel(0,-30), //信息框出现的位置进行偏移
});
infoWindow.open(map.value,需要出现的位置);//一定要在自己想要的地图里出现
})
?之后点击标签就可以有效果了
?相关图片出处:bilibili?作者:萤火rise?虚构世界与现实世界的连接点——关于《三色绘恋》等游戏的原型地圣地巡礼 - 哔哩哔哩
文章来源:https://blog.csdn.net/weixin_59915237/article/details/132783214
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!