Vue3中调用高德地图选点功能 |

在项目中有需求为：在地图上选点获取选中点位的坐标，所以选用了高德地图的api。在网上找了很久发现大多案例都是vue2中通过CDN的方式引用的，根据官方文档的建议，为了更好的契合 Vue 使用我选用的是通过npm包安装的方式（vue3 + tsx）。

安装
1
npm i @amap/amap-jsapi-loader --save

新建文件MapContainer.tsx

基本HTML结构

import { defineComponent } from 'vue';
// 引入插件
import AMapLoader from '@amap/amap-jsapi-loader';

export default defineComponent({
  setup() {

    return () => (
      <>
    	 {/*挂载地图的容器*/}
        <div id={'container'} style={{ width: '100%', height: '100%' }}></div>
         {/*如果不需要POI搜索可以不要下面的部分*/}
        <div id="pickerBox">
          <input id="pickerInput" placeholder="输入关键字选取地点"/>
          <div id="poiInfo"></div>
        </div>
      </>
    );
  },
});

初始化配置

import { defineComponent, onMounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity';

export default defineComponent({
  setup(props, { emit }) {
    const map = shallowRef(null);
    const siteInfo = ref({});
    const initMap = () => {
      AMapLoader.load({
        key: 'xxxxx',             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0',      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Scale', 'AMap.ToolBar'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        map.value = new AMap.Map('container', {  //设置地图容器id
          viewMode: '3D',    //是否为3D地图模式
          zoom: 15,           //初始化地图级别
          center: [112.938882, 28.228304], //初始化地图中心点位置
        });
      }).catch(e => {
        console.log(e);
      });
    };
    onMounted(() => {
      initMap(); //  一定需要在Mounted后初始化
    });
    return () => (
      <>
        {/*挂载地图的容器*/}
        <div id={'container'} style={{ width: '100%', height: '100%' }}></div>
        {/*如果不需要POI搜索可以不要下面的部分*/}
        <div id="pickerBox">
          <input id="pickerInput" placeholder="输入关键字选取地点" />
          <div id="poiInfo"></div>
        </div>
      </>
    );
  },
});

使用组件

与CDN引入的方式不同。在这里折腾了好一会才整出来，网上也没找到类似的案例

官方文档案例如下

按照官网文档案例会存在找不到AMapUI等问题，后面发现可以在初始化地图的时候可以通过：

添加AMapUI.plugins配置项的方式安装组件
然后在地图初始化完后调用AMapUI，此时AMapUI挂载在全局window上
该AMapUI里面包含了AMapUI.plugins里对应组件的构造器

import { defineComponent, onMounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity';

export default defineComponent({
  setup(props, { emit }) {
    const map = shallowRef(null);
    const siteInfo = ref({});
    const initMap = () => {
      AMapLoader.load({
        key: '804f4c97664839e5bbc18f434348f778',
        version: '2.0',
        plugins: ['AMap.Scale', 'AMap.ToolBar'], 
        AMapUI: {
          plugins: ['misc/PositionPicker'], // 添加组件
        },
      }).then((AMap) => {
        map.value = new AMap.Map('container', {
          viewMode: '3D',
          zoom: 15,
          center: [112.938882, 28.228304],
        });
        const marker = new AMap.Marker({
          // position: [105.602725, 37.076636],
        });
        map.value.add(marker);
        const picker = new (window as any).AMapUI.PositionPicker({ // 配置需要的组件
          map: map.value,
        });
        picker.on('success', function (positionResult: any) {
          console.log(positionResult); // 选中点位的位置信息
        });
        picker.on('fail', function (positionResult: any) {
          console.log(positionResult, 'fail');
        });
        picker.start();
      }).catch(e => {
        console.log(e);
      });
    };
    onMounted(() => {
      initMap();
    });
    return () => (
      <>
        {/*挂载地图的容器*/}
        <div id={'container'} style={{ width: '100%', height: '100%' }}></div>
        {/*如果不需要POI搜索可以不要下面的部分*/}
        <div id="pickerBox">
          <input id="pickerInput" placeholder="输入关键字选取地点" />
          <div id="poiInfo"></div>
        </div>
      </>
    );
  },
});

最终效果：