vue3高德地图点击标点

 

1.首先如果没有key的话需要在高德开发平台申请key。
2.安装

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

3.容器：

<template>
  <div>
    <div class="info">
      <h4>获取地图级别与中心点坐标</h4>
      <p>当前级别：<span id="map-zoom">11</span></p>
      <p>当前中心点：<span id="map-center">121.498586,31.239637</span></p>
    </div>
    <div class="input-card">
      <h4>鼠标左键获取经纬度：</h4>
      <div class="input-item">
        <input type="text" readonly="true" id="lnglat" />
      </div>
    </div>

    <div id="map"></div>
  </div>
</template> 

4.容器样式：

#map {
  margin: 50px auto;
  width: 800px;
  height: 500px;
}

5.在组件中引入所需的 API。

import AMapLoader from '@amap/amap-jsapi-loader'; // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import { shallowRef } from '@vue/reactivity';
i