vue使用amap实现地图选点

需求

在页面中实现地图选点功能（包括输入位置标记点，地图点击标记点，标记点需要有经度、纬度和详细地址）

思路分析

1.先实现输入位置，获取经纬度，实现地图标记点；
2.监听地图点击事件，获取经纬度，实现地图标记点；

准备工作

1.vue-amap文档
2.高德地图JS API、高德地图输入提示、高德地图逆地理编码

代码使用

1.安装amap

npm install vue-amap --save

2.main.js引用

// 引入vue-amap（高德地图）
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
    // 高德的key
    key: '高德地图申请的key',
    // 插件集合
    plugin: [
        'AMap.Autocomplete',
        'AMap.PlaceSearch',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.PolyEditor',
        'AMap.CircleEditor',
        'AMap.Geolocation'
    ],
    // 高德 sdk 版本，默认为 1.4.4
    v: '1.4.4'
});

3.vue文件代码

运行结果

image.gif