vue-amap、兼容高德原生sdk 实现多个点标记、自定义信息窗体_高德地图sdk标记当前位置和另一个位置-CSDN博客

本文链接：https://blog.csdn.net/Superman_peng/article/details/119653403

本文介绍了如何在Vue项目中结合vue-amap库和高德原生SDK，实现地图上显示多个点标记，并且详细讲解了自定义信息窗体的实现过程，为地图应用开发提供了实用参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-amap与高德原生sdk一起使用时，需要在index.html里面引入原生sdk

<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=yourkey"></script>
        <link rel="stylesheet" href="https://at.alicdn.com/t/font_2704084_4qs6i7c5kf7.css">
      </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

示例

<template>
  <div id="container">
    <el-amap vid="amap" :amapManager="amapManager" :events="mapEvents">
      <el-amap-marker
        v-for="(marker, index) in markers"
        :icon="icon"
        :position="marker.position"
        :key="index"
        :events="marker.events"
        :title="marker.name"
        :label="marker.label"
        :offset="[-15, -30]"
      />
    </el-amap>
    <div class="title">华新项目管理大屏</div>
    <div class="switch-wrapper active" id="switch" @click="switchMap">
      <i class="iconfont icon-astronomical-full"></i>
      <span class="sate-text">卫星</span>
    </div>
  </div>
</template>

<script>
import axios from "./utils/request";
import {
      AMapManager }