vue3/uniapp + 高德地图 实现动态添加自定义图片（icon）和文本

vue3/uniapp + 高德地图动态标点和文本

1. 下载高德地图插件：

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

2. 新建地图组件：

在项目中新建 MapContainer.vue 文件，用作地图组件。

/* MapContainer.vue 文件夹下 */
<template>
  <div id="container" style="resize: both"></div>
</template>

3. 初始化地图：

<script setup>
import { onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
const pageTitleOne = ['科技信息地区1', '科技信息地区2', '科技信息地区3']
onMounted(() => {
  AMapLoader.load({
    key: '************************', // 此处复制：申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本
  })
    .then((AMap) => {
      map = new AMap.Map('container', { // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        center: [117.136894, 36.675769], // 初始化地图中心点位置
        // -----
        rotateEnable: true,
        pitchEnable: true,
        resizeEnable: false, // 允许自动调整地图大小
        zoom: 17, //放大层级
        pitch: 65, // 倾斜角度
        rotation: 20, //
        zooms: [2, 20],
        showLabel: true //显示地图文字标记
      })
      // 此处放，下面的 【地图上添加动态图片/icon和文本】中的代码：
    })

    .catch((e) => {
      console.log(e)
    })
})

onUnmounted(() => {
  map?.destroy()
})

获取高德key,很简单，账号申请即可。附有高德获取key的教程！

地图上添加动态图片/icon和文本：

注意点：
1.在vue中，地图上使用的图片：将图片放置在 Vue 项目的public 文件夹下的某个目录中，例如 public/assets/map.png，然后在代码中引用相对路径即可。
2. 在uniapp中，将图片放在static文件夹下，绝对路径进行引入，/static/images/interaction/wfj.png

var markers = [
        {
          position: [117.136894, 36.675769],
          content: `<div style="background: url(\'/assets/map.png\') no-repeat; background-size: contain; width: 180px; height: 160px; color: #fff; text-align: center; line-height: 76px;">
          ${pageTitleOne[0]} </div>`,
          id: 11
        },
        {
          position: [117.134588, 36.677902],
          content: `  <div style="background: url(\'/assets/map.png\') no-repeat; background-size: contain; width: 180px; height: 160px; color: #fff; text-align: center; line-height: 76px;">
          ${pageTitleOne[1]} </div>  `,
          id: 12
        },
        {
          position: [117.134511, 36.676028],
          content: ` <div style="background: url(\'/assets/map.png\') no-repeat; background-size: contain; width: 180px; height: 160px; color: #fff; text-align: center; line-height: 76px;">
          ${pageTitleOne[2]} </div> `,
          id: 13
        }
      ]

      for (var i = 0; i < markers.length; i++) {
        var marker = new AMap.Marker({
          position: markers[i].position, // 标记位置
          content: markers[i].content
        })
        map.add(marker)
      }

图中icon图片为网上随便摘取的，如有侵权或者其他的影响，请告知立即删除！