Vue3调用高德地图

首先看一下完整页面

 

下面是地图代码

一、安装高德地图,在项目文件里执行npm install AMap --save。

二、在vue.config.js文件中配置文件

Vue3调用高德地图_第1张图片

三、 在public文件夹下的index.html中引用高德地图插件和密钥Vue3调用高德地图_第2张图片

 

四、以上步骤完成已成功配置完成,接下来在页面中调用即可

Vue3调用高德地图_第3张图片

 

Vue3调用高德地图_第4张图片

 

Vue3调用高德地图_第5张图片

注意:高德地图获取经纬度的格式为:Vue3调用高德地图_第6张图片

 五、按照以上顺序即可成功调用高德地图

 

你可能感兴趣的:(前端html,vue.js,npm,node.js,map)