vue中使用高德地图渲染多个不同类型的点，根据勾选数据类型不同打点显示隐藏

葫芦娃y

于 2024-01-15 19:10:52 发布

阅读量861

点赞数 15

分类专栏：地图前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43857653/article/details/135608696

版权

本文介绍了如何在Vue项目中引入高德地图2.0JavaScriptSDK，并创建一个组件来渲染地图，根据用户选择的类型显示或隐藏不同类型的点位。

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

一、在index.html文件中引入高德地图JavaScript API的2.0版本SDK

<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>

二、创建一个Vue组件，用于渲染地图和点位

html
<template>
  <div class="map-container">
    <div id="map" class="map"></div>
    <div class="checkbox-container">
      <label v-for="(type, index) in types" :key="index">
        <input type="checkbox" :value="type" v-model="selectedTypes" @change="toggleMarkers">
        {
   {
    type }}
      </label>
    </div>
  </div>