element使用vueamap 高德地图定位并回显经纬度

最新推荐文章于 2025-04-27 09:04:44 发布

原创

最新推荐文章于 2025-04-27 09:04:44 发布 · 9.4k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue amap

element使用高德地图定位并回显经纬度

一、安装vue-amap

cnpm install vue-amap --save

二、安装完成后，main.js文件中引入

import VueAMap from "vue-amap";
Vue.use(VueAMap);

初始化高德地图，此处需要有一个KEY，可以到高德地图平台上去申请。初始化高德地图的key与插件

注册登陆高德地图开发平台申请key https://id.amap.com/ ，

VueAMap.initAMapApiLoader({
  key: "e1dedc6bdd765d46693986ff7ff969f4",
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "A