用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址
<template><div class="wrap"><div><div>详细地址:{{addressKeyWord }}</div><div>经纬度:{{lnglat }}</div><div>备注地点名:{{locationName }}</div></div><div id="container"></div><a-inputstyle="width: 199px"v-model="addressKeyWord"id="pickerInput"placeholder="请输入关键字"/></div></template><script>export default {data () {return {lnglat: [116.397428, 39.90923],addressKeyWord: "",locationName: ''}},mounted () {this.handleInitMap()},methods: {handleInitMap () {this.map = new AMap.Map('container', {resizeEnable: true, //是否监控地图容器尺寸变化zoom: 14, //初始化地图层级center: this.lnglat//初始化地图中心点})this.handleAddMarker()this.map.on('click', (ev) => {// 触发事件的地理坐标，AMap.LngLat 类型var lnglat = ev.lnglatconsole.log(ev, lnglat)this.lnglat = [lnglat.lng, lnglat.lat]this.map.clearMap()this.handleAddMarker()this.map.setCenter(this.lnglat)// 将经纬度坐标转化为详细地址AMap.plugin('AMap.Geocoder', () => {var geocoder = new AMap.Geocoder({extensions: 'all'// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode})var lnglat1 = [lnglat.lng, lnglat.lat]geocoder.getAddress(lnglat1, (status, result) => {if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息console.log(result, '详细地址')this.addressKeyWord = result.regeocode.formattedAddressthis.locationName = result.regeocode.pois[0].name}})})})//加载BasicControl，loadUI的路径参数为模块名中 'ui/' 之后的部分AMapUI.loadUI(['control/BasicControl'], (BasicControl) => {//缩放控件this.map.addControl(new BasicControl.Zoom({position: 'rb', //left top，左上角showZoomNum: false //显示zoom值}))})//加载PoiPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker) => {var poiPicker = new PoiPicker({input: 'pickerInput' //输入框id})//监听poi选中信息poiPicker.on('poiPicked', (poiResult) => {//用户选中的poi点信息console.log(poiResult, "poiResult")let lnglat = poiResult.item.locationthis.addressKeyWord = poiResult.item.namethis.lnglat = [lnglat.lng, lnglat.lat]this.map.clearMap()this.handleAddMarker()this.map.setCenter(this.lnglat)})})},handleAddMarker () {// 构造点标记const marker = new AMap.Marker({icon: "/theme/v1.3/markers/n/mark_b.png",position: this.lnglat})// 构造矢量圆形const circle = new AMap.Circle({center: new AMap.LngLat(this.lnglat[0], this.lnglat[1]), // 圆心位置radius: 1000, //半径strokeColor: "#1890ff", //线颜色strokeOpacity: 1, //线透明度strokeWeight: 3, //线粗细度fillColor: "#1890ff", //填充颜色fillOpacity: 0.35 //填充透明度})// 将以上覆盖物添加到地图上// 单独将点标记添加到地图上this.map.add(marker)// add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上this.map.add([marker, circle])}},};</script><style lang="scss" scoped>#container {width: 100%;height: 500px;}.wrap {position: relative;#pickerInput {position: absolute;right: 0;top: 50px;z-index: 99999;}}</style>
用高德地图实现点击地图添加标记点 获取该点的经纬度 详细地址 通过输入框进行地址搜索自动定位到输入框地址
