用高德地圖實現點擊地圖添加標記點，獲取該點的經緯度，詳細地址，通過輸入框進行地址搜索自動定位到輸入框地址

<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: "https://webapi.amap.com/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>

總結

以上是生活随笔為你收集整理的用高德地图实现点击地图添加标记点，获取该点的经纬度，详细地址，通过输入框进行地址搜索自动定位到输入框地址的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。