Vue3 引入高德地图 + 添加标记点

最新推荐文章于 2025-03-09 17:15:32 发布

我都没吃饱

最新推荐文章于 2025-03-09 17:15:32 发布

阅读量2.1k

点赞数 14

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Guanchong333/article/details/136727755

版权

第一步:

登陆高德开放平台，申请密钥

第二步:

安装高德地图的依赖插件

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

第三步:

在index.html中引入

<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=你的安全密钥"></script>

第四步:

新建MapView.vue 文件

<template>
  <div class="map" ref="mapContainer"></div>
</template>


<script setup>
import { onMounted, ref } from 'vue'

// 获取地图的实例 dom
const mapContainer = ref(null)

// 存储后端返回的数据(本次我用的是静态数据)
const arrMapList = ref([
    {
        guard: true,
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',                 
        position: new AMap.LngLa