vue3封装leaflet并使用高德底图

原创

已于 2024-03-24 21:32:25 修改 · 918 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-03-24 21:26:39 首次发布

本文介绍了一个使用Vue.js和Leaflet库构建的地图组件，支持高德和腾讯地图底图，具备新建图层、单个多点打点功能，以及经纬度和详细地址的转换通过高德API实现。组件还包含搜索框和工具栏，方便用户操作。

该组件配置了高德和腾讯地图的底图。具有新建图层和打点（使用leaflet中的方法），打点分为单个和多个。经纬度和详细地址的互相转换由高德api完成。

<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="module-top">
      <el-input  v-model="modelValue" placeholder="" style="width: 100%;" @input="onInput"/> 
    </div>
    <!-- 工具栏 -->
    <div class="module-tools">
      <div class='tools-box'>
        <button @click="onClickMark(1)">打点-单个</button>
        <button @click="onClickMark(2)">打点-多个</button>
        <button @click="onClearLayer">清空</button>
      </div>
    </div>

    <div ref="mapLeafletRef" class="map"></div>
  </div>
  <!-- <button @click="onClearLayer">btn</button> -->
</template>
<script setup>
import L from 'leaflet';
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, onUnmounted, ref, getCurrentInstance, watch