Vue3引入高德地图js API 2.0

前言

本文主要由地图加载、POI检索、绘制点标记、信息窗体、信息窗体中链接的路由跳转、相关事件的使用几部分组成。
目前网上关于高德js API的文章大多数是vue2.0版本的，这篇文章是基于vue3.0的，我的写法不一定是主流写法，如果有更好的写法，请评论中指正，感谢🙏🙏🙏

一、地图加载

1.本文准备环境

• node 和 git - 项目开发环境
• pnpm - 速度快、节省磁盘空间的软件包管理器
• Vite
• Vue3
• TypeScript
• Es6+
• Vue-Route
• 高德开发者-获取key和安全密钥
• 高德JSApi手册
• 高德JSApi教程
• 高德JSApi示例

2.引入库

代码如下（示例）：

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

3.加载地图

<!-- 创建地图容器，js api会根据id将地图加载到容器中 -->
<!-- 注意：需要设置地图容器的大小 -->
<template>
  <div id="container"></div>
</template>
<component :is="'script'" type="text/javascript">
	<!-- 使用明文设置安全密钥（不安全），https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode  -->
    window._AMapSecurityConfig = {securityJsCode: '准备环境阶段拿到的的安全密钥'}
</component>

<!-- 本文中使用script-setup，非setup需要自行替换写法 -->
<script lang="ts" setup>
	// 引入jsApi 地图Loader
	import AMapLoader from '@amap/amap-jsapi-loader';
	
	let map = null;
	onMounted(() => {
     
     
	  AMapLoader.load({
     
     
	    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
	    version: "2.0", // 指定要加载的 JSAPI 的版本
        plugins: ["AMap.Scale", "AMap.ToolBar"], //(按需引用，pc端建议加入AMap.ToolBar，便于操作)需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  	  })
    .then((AMap) => {
     
     
      // 加载地图到id为container的容器中
      map = new AMap.Map("container", {
     
     
        viewMode: "2D", // 设置地图视图类型,2D / 3D
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
     
     
      console.log(e);
    });
});

onUnmounted(() => {
     
     
  map?.destroy();
});
</script>

<style  scoped>
	// 设置地图容器的大小
    #container{
     
     
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>

4.加载地图控件

<!-- 本文中使用script-setup，非setup需要自行替换写法 -->
<script lang="ts" setup>
	// ··· 相关代码已省略
	let map = null;
	onMounted(() => {
     
     
	  AMapLoader.load({
     
     
	    key: "", 
	    version: "2.0",
        plugins: ["AMap.Scale", "AMap.ToolBar"], //(按需引用，pc端建议加入AMap.ToolBar，便于操作)需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  	  })
	    .then((AMap) => {
     
     
	      // 加载地图到id为container的容器中
	      map = new AMap.Map("container", {
     
     
	        viewMode: "2D", // 设置地图视图类型,2D / 3D
	        zoom: 11, // 初始化地图级别
	        center: [116.397428, 39.90923], // 初始化地图中心点位置
	      });
	
		  // 地图加载后，可以加载地图控件。
		  // 如：创建工具条插件实例。需要在AMapLoader.plugins中引入控件，并map.addControl添加到地图中
	      var toolbar = new AMap.ToolBar();
	      map.addControl(toolbar);
	    })
	    .catch((e) => {
     
     
	      console.log(e);
	    });
	});
	
	onUnmounted(() => {
     
     
	  // 页面关闭后及时销毁资源
	  map?.destroy();
	});
</script>

二、POI搜索

1.什么是poi搜索

poi检索是高德的地理信息查询服务，即通过关键字获取目标地理信息（如坐标，城市信息等）。其中包含输入提示插件AMap.AutoComplete和POI 搜索插件 AMap.PlaceSearch，如图显示，右上角通过JAC获取多个地点提示信息即输入提示插件，选择匹配信息后，POI 搜索插件会返回多个相关的地理信息，并在地图上添加标记点。

2.如何使用

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