Vue3引入高德地图基本操作一条龙~很详细~看了你也会！

已于 2024-10-30 14:23:50 修改
阅读量5.1k 收藏 43
点赞数 29
分类专栏： 前端 文章标签： 1024程序员节 vue
于 2024-10-24 14:19:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45502195/article/details/143208098
版权

你们好，我是金金金。

image.png

前言

撰写本文的初衷既是为了方便各位读者，也是为了自我提升。在未来面对一些基本操作时，我们不再需要频繁查阅官方文档，节省宝贵的时间。网络上的相关资料虽然丰富，但质量良莠不齐，查找起来颇为不便。因此，我希望通过这篇整理详尽、条理清晰的文章，为大家提供一个可靠的信息来源

看完本篇文章能学到什么？

如何把高德地图引入至Vue3项目中；

地图正常展示；

根据经纬度打点标记、自定义图标；

点标记覆盖物如何触发点击事件；

点击点标记覆盖物打开自定义信息窗体展示；

点聚合;

点聚合点击判断的一个方式;

实操

引入高德地图至Vue3项目中以及地图的一个正常展示

  1. 成为开发者并创建 key(为了正常调用 API ，需先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥)
    • 这里不过多赘述，自己去申请注册一下，点击可跳往操作地址
    • 提示：在2021年12月02日以后申请的key需要配合安全密钥一起使用。
  2. NPM 安装 Loader
    npm i @amap/amap-jsapi-loader --save
  3. 新建一个组件，我这里名为MapContainer.vue，用作地图组件（名字随意）
  4. 创建地图容器
    • 在 MapContainer.vue 地图组件中创建 div 标签作为地图容器 ，并设置地图容器的 id 属性为 container
    <template> 
    <div id="container"></div> 
</template>
  5. 设置地图样式
    <style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
  6. 初始化地图
    onMounted(() => {
 window._AMapSecurityConfig = {
   securityJsCode: "「你申请的安全密钥」",
 };
 AMapLoader.load({
   key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
   version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
 })
   .then((AMap) => {
     map = new AMap.Map("container", {
       // 设置地图容器id
       viewMode: "3D", // 是否为3D地图模式
       zoom: 11, // 初始化地图级别
       center: [116.397428, 39.90923], // 初始化地图中心点位置
     });
   })
   .catch((e) => {
     console.log(e);
   });
})

好了，大概的步骤就是这么多，所有代码如下

在这里插入图片描述

测试

在这里插入图片描述

根据经纬度打点标记、自定义图标

分为三步走

  1. 创建Marker对象
  2. 自定义Icon传入至Marker
  3. 将Marker添加到地图上

在这里插入图片描述

添加多个点标记也很简单，传入多个经纬度数组数据，循环创建Marker添加即可

测试

在这里插入图片描述

点标记覆盖物如何触发点击事件

  • 比较简单，使用marker对象.on方法就可以监听到点击事件
marker.on('click', function (e) {
  alert("我被点击了")
})

在这里插入图片描述

测试

在这里插入图片描述

点击点标记覆盖物打开自定义信息窗体展示

注意：一个地图实例每次只能打开一个信息窗体

  • 先看一下默认信息窗体如何展示

默认信息窗体

  • 默认信息窗体已有关闭按钮，只需要设定InfoWindow的content属性。content是字符串拼接的 DOM 元素，content的样式可以自定义。

很简单，也可以分三步走

  1. 编写信息窗体的内容
  2. 创建 infoWindow 实例，传入信息窗体内容
  3. 打开显示信息窗体
// 信息窗体的内容
const content = [
  "<div><b>高德软件有限公司</b>",
  "电话 : 010-84107000   邮编 : 100102",
  "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",
]
// 创建 infoWindow 实例
const infoWindow = new AMap.InfoWindow({
  content: content.join("<br>"), // 传入字符串拼接的 DOM 元素
  anchor: "top-left", // 指定自定义锚点位置
})
// 打开信息窗体
infoWindow.open(map, map.getCenter()); // map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。

信息窗体通常是和点击事件配合使用的，例如：点击了某个覆盖物弹出相关信息

  1. 当覆盖物被点击时，调用打开信息窗体的方法

    在这里插入图片描述

  2. 信息窗体代码如下

    在这里插入图片描述

测试

在这里插入图片描述

自定义信息窗体

有些时候默认的信息窗体是不能满足业务需求的，比如框和关闭的icon都要改动，那就需要完全自定义信息窗体了

要自定义信息窗体，只需把 InfoWindow 的 isCustom 属性设置为 true ，信息窗体就会变成自定义信息窗体。与默认信息窗体的不同在于，自定义信息窗体需要自己通过 content 来实现关闭按钮以及全部外观样式，同时需要通过 offset 指定锚点位置，offset 为相对于 content 下边缘中间点的位移

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这里的重点其实就是css的编写了，因为使用了自定义信息窗体，框的样式都需要自己编写。

测试

在这里插入图片描述

自定义信息窗体事件触发

  1. 通过onclick绑定了事件

在这里插入图片描述

  1. 定义相对应的方法

在这里插入图片描述

  1. 需要挂载到window全局上，不然会报错函数未定义

在这里插入图片描述

测试
  • 点击手环详情以及关闭自定义信息窗体都是没有任何问题的

在这里插入图片描述

点聚合

有两种方式，分别为：按距离聚合和按索引聚合。我这里采用的是按距离聚合

大致步骤可以分为三步走

  1. 创建聚合点数据
  2. 自定义图标样式
  3. 添加聚合组件
// 点聚合数据
const _renderMarker = (context) => {
    // context 为回调参数，
    // 包含如下属性 marker:当前非聚合点
    context.marker.setContent(`<img src="${CourtDIcon}" alt="" />`)
}
const points = [
    { weight: 8, lnglat: ['120.475655', '27.570581'] },
    { weight: 1, lnglat: ['120.472792', '27.564668'] },
    { weight: 1, lnglat: ['120.551636', '27.66167'] },
    { weight: 1, lnglat: ['120.546932', '27.773796'] },
    { weight: 1, lnglat: ['120.341914', '27.644967'] },
]
// 点聚合
new AMap.MarkerCluster(map, points, {
    gridSize: 60, //数据聚合计算时网格的像素大小
    renderMarker: _renderMarker, //上述步骤的自定义非聚合点样式
})

在这里插入图片描述

点聚合点击判断

其实也很简单，思路：通过包含点的数量判断是否是聚合点，数量为1说明不是聚合点

一些参考的代码我贴出来供大家参考~

在这里插入图片描述

全部代码

<script setup>
  import { onMounted, onUnmounted, ref } from 'vue'
  import AMapLoader from '@amap/amap-jsapi-loader'
  import WristbandIcon from '@/assets/imgs/device/ding_wei.png'
  import UserIcon from '@/assets/imgs/user.png'
  import ServiceIcon from '@/assets/imgs/service.png'
  import CourtDIcon from '@/assets/imgs/court_d.png'

  let map = null
  const infoWindow = ref(null)

  const closeInfo = () => {
    infoWindow.value?.close()
  }
  const handleWristbandClick = () => {
    alert("点击了手环")
  }
  const _renderMarker = (context) => {
    // context 为回调参数，
    // 包含如下属性 marker:当前非聚合点
    context.marker.setContent(`<img src="${CourtDIcon}" alt="" />`)
  }
  
  const openInfo = () => {
    // 构建信息窗体中显示的内容
    const info = []

    info.push('<div class="info-box">')
    // 主题内容部分
    info.push('<div class="info-box-main">')
    info.push(`<img class="info-box-main-img" src="${UserIcon}" alt="" />`)
    info.push('<div>')
    info.push(`<p>姓名: 张三</p>`)
    info.push(`<p>电话: 18888888888</p>`)
    info.push('</div>')
    info.push('</div>')
    // 手环
    info.push('<div class="info-box-footer">')
    info.push(`<img class="info-box-footer-img" src="${ServiceIcon}" alt="" />`)
    info.push('<span οnclick="handleWristbandClick()">手环详情</span>')
    info.push('<span>></span>')
    info.push('</div>')
    info.push('</div>')
    // 三角
    info.push('<div class="info-triangle">')
    info.push('</div>')
    // 关闭按钮
    info.push('<div class="info-close" οnclick="closeInfo()">×')
    info.push('</div>')
    
    // 创建 infoWindow 实例
    infoWindow.value = new AMap.InfoWindow({
      isCustom: true, //使用自定义窗体
      content: info.join('<br>'), //传入字符串拼接的 DOM 元素
      anchor: 'top-left', // 指定自定义锚点位置
    })
    // 打开信息窗体
    infoWindow.value.open(map, map.getCenter()) //map 为当前地图的实例，map.getCenter() 用于获取地图中心点坐标。
  }
  onMounted(() => {
    window._AMapSecurityConfig = {
      securityJsCode: '这里填写你的密钥',
    }
    AMapLoader.load({
      key: '这里写你申请的key', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        })
        // 创建一个 icon
        const wristbandIcon = new AMap.Icon({
          image: WristbandIcon,
        })
        // 创建一个 marker
        const marker = new AMap.Marker({
          position: new AMap.LngLat(116.397428, 39.90923), // 根据经纬度设置 maker 位置
          icon: wristbandIcon, // 设置图标
          offset: new AMap.Pixel(-13, -30) // 设置图标偏移量
        })
        // 覆盖物点击事件
        marker.on('click', function (e) {
          openInfo()
        })
        // 将 marker 添加到地图
        map.add([marker])
        
        // 点聚合数据
        const points = [
          { weight: 8, lnglat: ['120.475655', '27.570581'] },
          { weight: 1, lnglat: ['120.472792', '27.564668'] },
          { weight: 1, lnglat: ['120.551636', '27.66167'] },
          { weight: 1, lnglat: ['120.546932', '27.773796'] },
          { weight: 1, lnglat: ['120.341914', '27.644967'] },
        ]
        // 点聚合
        new AMap.MarkerCluster(map, points, {
          gridSize: 60, //数据聚合计算时网格的像素大小
          renderMarker: _renderMarker, //上述步骤的自定义非聚合点样式
        })

        window.closeInfo = closeInfo
        window.handleWristbandClick = handleWristbandClick
      })
      .catch((e) => {
        console.log(e)
      })
  })
  onUnmounted(() => {
    map?.destroy()
  })
</script>

<template>
  <div id="container"></div>
</template>

<style lang="scss">
  #container {
    width: 100%;
    height: 100%;
  }
  .info-box {
    padding: vw(15);
    color: #fff;
    background-color: #01161ccc;
    box-shadow: inset vw(-2) 0 vw(8) vw(2) #428ffccc, 0 0 vw(6) vw(2) #00000088;
    border: vw(2) solid rgb(86, 156, 255);
    border-radius: vw(10);
    &-main {
      display: flex;
      align-items: center;
      font-size: vh(16);
      &-img {
        width: vw(40);
        height: vw(40);
        margin-right: vw(10);
      }
    }
    &-footer {
      margin-top: vh(10);
      font-size: vh(14);
      color: #00e5ff;
      display: flex;
      align-items: center;
      &-img {
        width: vw(14);
        height: vw(14);
        margin-right: vw(3);
      }
    }
  }
  .info-triangle {
    width: 0;
    height: 0;
    border-left: vw(8) solid transparent;
    border-right: vw(8) solid transparent;
    border-top: vw(8) solid #008fd4;
    margin: 0 auto;
  }
  .info-close {
    position: absolute;
    right: vw(-8);
    top: vw(-8);
    width: vw(20);
    height: vw(20);
    background-color: #0ec1d4;
    color: #fff;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
  • 编写有误还请大佬指正，万分感谢。
vue3 - 详细实现内网使用离线高德地图功能，在vue3中无需网络离线使用高德地图相关功能，高德地图如何离线加载详细教程(内网部署及使用)，提供最新完整的瓦片资源下载及相关工具（示例代码，一键复制）
高级前端工程师
08-10 1万+
vue3，高德地图，离线使用高德地图，高德地图瓦片官方下载，内网使用高德地图离线无网络，断网情况下使用高德地图，vue离线高德地图教程，内网部署高德地图，无需联网离线使用，vue3+ts实现离线高德地图 内网离线高德地图，如何在高德地图Vue3项目中下载离线地图，地图加载不出来，不显示怎么办，内网使用离线高德地图加载失败问题，vue3实现离线地图+高德瓦片，vue3高德离线地图，如何使用离线高德地图和自定义地图样式，高德离线地图的下载，怎么下载高德地图瓦片，一键把所有瓦片都下载下来，离线加载，内网部署，离线
Vue3 可视化大屏引入高德地图，超详细，超简单，保姆级教程。
favourite23的博客
07-25 3228
1、 前往进行账号注册。如果手机上有高德地图App并且已经登录过，则可以直接选择登录2、注册/登录完成后来到 控制台-->应用管理-->我的应用-->点击创建新应用3、填写好应用名称和选择应用类型4、填写好后点击添加Key5、填写Key名称，选择Web端（JS API）勾选并同意协议6、完成以上步骤就会得到Key和安全密钥。注意保管。
Vue3项目集成高德地图API实现高精度定位【超详细傻瓜式教程】
weixin_57190021的博客
03-07 1779
本教程将手把手教您在Vue3项目中接入高德地图，实现精确定位功能。每一步都配有截图说明，零基础也能轻松上手。
Vue3+vite对接高德地图实现公交路线规划
最新发布
weixin_48040732的博客
04-27 790
这里记录下自己在Vue3+vite的项目中增加对接高德地图通过输入起始站和终点站来实现公交路线规划，不使用ts语法，方便以后直接使用。这里承接自己的博客[Vue3+vite优化基础架构（2）--- 全局接口请求loading加载](https://blog.csdn.net/weixin_48040732/article/details/138219496)这篇博客，在该博客项目的基础上增加对接高德地图通过输入起始站和终点站来实现公交路线规划。
Vue3引入高德地图js API 2.0
hxy793518971的博客
04-20 2826
一文搞定基础的高德地图JSApi用法
vue3项目中接入高德地图。
专研技术的大学生:会点Java和前端
03-09 986
vue3项目中接入高德地图。
在 vue3 中使用高德地图
weixin_64684095的博客
04-23 1万+
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。//点标记显示内容`;如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。//在回调函数中使用插件功能placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息})
vue3接入高德地图
oqqgZuo1的博客
08-21 2729
const map = new AMap.Map("container",{ //设置地图容器id。version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15。// plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等。center:[117.120000,36.650200], //初始化地图中心点位置。viewMode:"3D", //是否为3D地图模式。
vue3引入cdn使用
范天缘的博客
05-16 8313
背景:引入cdn直接调用提示undefined 原因:因为你没有在vue.confing注册，然后重新运行项目 正确做法： 1.public/index.html 里面的body里面引入cdn 2.在vue.config.js里面配置cdn module.exports = { configureWebpack: { externals: { AMap: 'AMap' } } } 3.在需要的vue文件里面调用 import AMap from 'AMap' 4
Vue3引入高德地图
ThreeKims的博客
03-07 1114
【代码】Vue3引入高德地图。
vue3地图（高德）
zybijiso666的博客
07-29 669
想要标记点的可以去入门指南找到添加点标记，自己根据里面的方法进行添加（这里就不演示了）3、在进阶教程里面找到js api 结合vue使用。2、在开发支持里面找到web端的地图 js api。创建地图（初始化是initMap()）1、先百度搜索高德地图api。5、新建一个地图项目 使用。在setup()里面声明。
vue3引入高德地图代码示例
04-27
内容概要：项目引入高德地图用vue3实现地图功能 适合人群：地图展示 能学到什么：高德地图的一些基础功能的实现。 阅读建议：基于高德地图开发的功能 建议搭配高德开放平台的api一起使用
在vue中高德地图引入和轨迹的绘制的实现
01-21
（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from ‘vue-amap&#39; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: ‘********************&#39;,/...
vue3.0项目引入高德地图
W_Venus的博客
04-21 7582
记一次vue3.0项目引入高德地图，凑合看，勿喷
【vue3引入高德地图】
爱媳妇儿爱编程
04-24 2532
vue3项目中添加高德地图，后端人写前端的踩坑之旅，记录下来避免再次踩坑。 一些比较基础的使用api的用例
Vue3 + 高德地图
热门推荐
m0_68683769的博客
04-21 1万+
Vue3地图、Vue地图、Vue3 地图、Vue3 高德地图、vue 高德地图、vue 地图、高德地图、标记点、信息窗体、vue中使用高德地图、vue-amap、setup vue 高德地图、vue结合高德地图、vue中地图API的使用、vue3中高德地图
vue3项目中引入高德地图
qq_43751614的博客
08-07 2051
vue3项目中引入高德地图
vue3结合使用高德地图
Rziziの博客
12-19 2163
【代码】vue3结合使用高德地图。
vue3安装并使用高德地图（搜索与标记位置）
yhx98765的博客
12-20 3217
若有不足还请各位大佬指出使用高德地图API网址：准备-地图 JS API 2.0 | 高德地图API 在项目中新建 MapContainer.vue 文件，用作地图组件，并定义一个id为container的div标签容器 设置样式： 第三步：创建地图组件 在组价中引入 amap-jsapi-loader： 初始化地图： 搜索功能：网址：输入提示与 POI 搜索-服务插件和工具-进阶教程-地图 JS API 2.0 | 高德地图API使用插件：AMap.AutoComplete，AMap
vue3怎么引入高德地图
05-23
要在 Vue3 中引入高德地图，可以按照以下步骤操作： 1.在 `public/index.html` 文件中引入高德地图的 JavaScript API： ```html <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图key"></script> ``` 2.在需要使用地图的组件中，使用 `onMounted` 钩子函数来初始化地图： ```vue <template> <div id="map"></div> </template> <script> import { onMounted } from &#39;vue&#39;; export default { setup() { onMounted(() => { // 创建地图实例 const map = new AMap.Map(&#39;map&#39;, { center: [116.397428, 39.90923], zoom: 13 }); }); } } </script> ``` 注意：在使用高德地图之前，需要在高德开放平台申请一个 key，替换上述代码中的 `key`。 这样就可以在 Vue3 中引入高德地图了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值