场景:
VUE 项目中需要用到地址转经纬度,引用了高德地图JS API中的
地理编码与逆地理编码
方法
引入方式:在index.html
中以CDN 方式引入
<!-- 导入需要的包 (一定要放到index.html中的head标签里) -->
<!-- 高德地图api更新必须配合安全密钥使用 -->
<script>
window._AMapSecurityConfig = {
securityJsCode: '高德api授权密钥',
}
</script>
<script src="https://webapi.amap.com/maps?v=1.4.11&key={{Web端开发者key}}&plugin=AMap.PlaceSearch"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
问题:
本地运行正常,部署到测试环境,直接报错403
解决:
引入方式修改为:npm 安装,高德官方文档
npm i @amap/amap-jsapi-loader --save
在 main.js
中使用:
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
securityJsCode:'', // 申请的安全密钥
}
AMapLoader.load({
"key": "", // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "1.4.15", // 指定要加载的 JS API 的版本,缺省时默认为 1.4.15
"plugins": [
'AMap.PlaceSearch',
], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.0', // AMapUI 缺省 1.1
"plugins": [
'overlay/SimpleMarker',//SimpleMarker
'overlay/SimpleInfoWindow',//SimpleInfoWindow
], // 需要加载的 AMapUI ui插件
},
}).then((AMap)=>{
// AMap = new AMap.Map('container');
}).catch(e => {
console.log(e);
})