vue2中使用高德地图实现搜索定位(一)

vue2项目中有用到高德地图,以此记录:

需求:搜索可定位地点

过程:在vue2项运行起地图,在点图实现点标记,搜索功能,切换标记

vue-amap官方文档地址: https://github.com/ElemeFE/vue-amap/

安装 amap:

npm install vue-amap --save

地图搭建:

main.js

import VueAMap from "vue-amap"
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: "xxxxxxxxxxxxxxx",
  plugin: [
    "AMap.Autocomplete", //输入提示插件
    "AMap.PlaceSearch", //POI搜索插件
    "AMap.Scale", //右下角缩略图插件 比例尺
    "AMap.OverView", //地图鹰眼插件
    "AMap.ToolBar", //地图工具条
    "AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置
    "AMap.Geocoder"// 逆地理编码,通过经纬度获取地址所在位置详细信息
    // 根据需求选用
  ],
  uiVersion: "1.0", // 地图ui版本
  v : '1.4.4' // amap版本
})

vue文件:

　最终效果如下：

 自此，地图部署完成也可以搜索，但是想点地图上的点，并且获取经纬度并未实现，