Vue2 + 高德地图API 获取用户当前位置等信息，错误default.CitySearch is not a Constructor的应对

效果

高德地图API参考手册

控制台输出信息:

代码

public/index.html：使用CDN引入高德地图API

    <script type="text/javascript">
            window._AMapSecurityConfig = {
              securityJsCode:'',  //安全秘钥(官网文档强调2021年12月2日起，新申请的Key就必须和安全秘钥一起使用了) 或者服务器地址
                // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
            }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请到的Key&plugin=AMap.CitySearch"></script> 

注意这里有个坑，在官网文档没说，就是CDN里填了你的key之后，要么加上&plugin=AMap.CitySearch, API2, API3, ...设置好你要用的插件，要么在你自己的函数里，在使用高德API之前，使用AMap.plugin('API', ()=>{})引入，否则不会生效，且控制台会出现类似这种报错: default.APIxxx is not a Constructor。

然后是下面这个配置项

vue.config.js

module.exports = defineConfig({
    configureWebpack: {
        externals:{
            AMap: "window.AMap" //注意
        }
    },
});

yourComponent.vue

<template>
	<div>
		 <p>{{locationNow}}</p>
	</div>
</template>

<script>
import AMap from 'AMap'

export default{
	data(){
		return {
			locationNow: ""; //初始化
		}
	},
	methods:{
    	getLocation(){
        	var citySearch = new AMap.CitySearch();
       	 	citySearch.getLocalCity((status, result) => { //status是返回的状态码,'complete'表示成功
        											  	  //result是一个Object，装有getLocalCity返回的结果
    	  		//console.log(result)  --> 这里输出result，如果服务申请错了，会在控制台打印USERKEY_PLAT_NOMATCH
          	if (status === 'complete' && result.info === 'OK') {
              	this.locationNow = result.province + result.city
              	//getLocalCity()是自动获取用户当前Ip并通过Ip获取当前地址
              	//getLocalCity()得到的结果里，最终用得上的只有province和city
          	}
        	})
    	}	
	},
	mounted(){
		this.getLocation();
	}
}		
</script>

流程

代码在上面，这里是高德开放平台那边的流程，开放平台那边是获取服务，也有个坑

先进入开放平台，进入控制台

然后进入 应用管理 --> 我的应用

然后最右边创建新应用 --> 输入名字和类型后

关键来了，如果你是开发Web网页使用，那么选择web端(JS API)，别错选web服务！

提交之后就是写代码了

注意事项

主要注意服务类型的选择，还有CDN里加上在key后加上&plugin=AMap.API1, API2，另外别忘了现在新申请的Key都要和安全秘钥一起使用