vue3+ts 引入高德地图并使用地图选点和搜索

原创

已于 2025-03-06 14:31:03 修改 · 2.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2023-11-02 16:56:08 首次发布

本文介绍了如何在Vue项目中引入高德地图API，包括设置密钥、创建map组件、处理地图点击事件、搜索功能以及坐标传递给父组件。

引入高德地图

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

在index.html引入

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '', // 你的密钥
    }
</script>

创建map.vue组件

<template>
  <div class="home">
    <div id="map-box"></div>
    <div class="btn">
      <el-button type="primary" @click="btnsubmit">确定</el-button>
    </div>
    <div class="info-box">
      <el-input
          v-model="keyword"
          placeholder="输入关键字搜索"
          style="width: 300px"
          @change="handleSearch"
      >
      </el-input>
      <div class="ul">
        <div class="li" v-for="item in data" :key="item.id" @click="handleSelect(item)">
          <div class="d-flex flex-column">
            <span style="margin-bottom: 6px">{
  
  {item.name}}</span>
            <span>地址：{
  
  {item.address}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { shallowRef,defineEmits,defineComponent,ref, onBeforeUnmount } from 'vue';
imp