vue-amap、兼容高德原生sdk 实现多个点标记、自定义信息窗体

最新推荐文章于 2024-07-18 10:55:30 发布

Missy Peng

最新推荐文章于 2024-07-18 10:55:30 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： vue-amap 高德原生sdk 多个点标记自定义信息窗体

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

版权

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

摘要由CSDN通过智能技术生成

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 }

最低0.47元/天解锁文章

Missy Peng

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue-amap、兼容高德原生sdk 实现多个点标记、自定义信息窗体

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"&gt
复制链接

扫一扫

专栏目录