基于高德地图封装vue3 地图打点组件

最新推荐文章于 2025-06-28 17:59:59 发布

人间散章

最新推荐文章于 2025-06-28 17:59:59 发布

阅读量386

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/qq_64750772/article/details/137674518

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

let map = null;
let inputRef = ref();
let marker = null;
let point = ref([]);
let emit = defineEmits(['point']);

onMounted(() => {
  AMapLoader.load({
    key: , // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center:  // 初始化地图中心点位置（自己设置）
      });

      //输入提示
      var autoOptions = {
        input: inputRef.value.inputElRef
      };
      AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
        var auto = new AMap.AutoComplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
          map: map
        }); //构