vue-amap根据地址回显地图并mark

最新推荐文章于 2025-07-16 12:59:52 发布

原创

最新推荐文章于 2025-07-16 12:59:52 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-amap

实现了地图选址功能后，现在来实现一个根据地址回显地图并标记的功能，效果图如下：

直接上代码：

main.js中引入

import Vue from 'vue'
import VueAMap from 'vue-amap'
import App from './App'
import router from './router'
Vue.config.productionTip = false
localStorage.clear();
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  //高德的key
  key: "cc644a48b701c256e9a827f068743fdd",
  // 插件集合
  plugin: [
    "AMap.Autocomplete",// 输入提示插件 
    "AMap.PlaceSearch",// POI搜索插件
    "AMap.Scale",// 右下角缩略图插件 比例尺
    "AMap.OverView",// 地图鹰眼插件
    "AMap.ToolBar",// 地图工具条
    "AMap.MapType",// 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    "AMap.PolyEditor",// 编辑 折线多，边形
    "AMap.CircleEditor",// 圆形编辑器插件
    "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
    "AMap.Geocoder",// 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
    "AMap.AMapUI",// UI组件
  ],
  v: "1.4.4",
  uiVersion: "1.0