<template><div class="container"><div id="map-container">地圖</div></div> </template><script> export default {name: '',components: {},data () {return {map: null,markers: [],markersPosition: [],geoCoder: null}},mounted () {this.mapInit()},methods: {mapInit () {// eslint-disable-next-line no-undefthis.map = new AMap.Map('map-container', {zoom: 11, // 級別// center: [116.397428, 39.90923], // 中心點坐標(biāo)// layers: [ // 使用多個圖層// // 衛(wèi)星// new AMap.TileLayer.Satellite(),// // 路網(wǎng)// new AMap.TileLayer.RoadNet()// ],resizeEnable: true// viewMode: '3D'// 使用3D視圖})// eslint-disable-next-line no-undefthis.geoCoder = new AMap.Geocoder()this.handlerMapClick()},handlerMapClick () {this.map.on('click', (e) => {// 點擊坐標(biāo)this.markersPosition = [e.lnglat.lng, e.lnglat.lat]this.removeMarker()// 設(shè)置新的標(biāo)記this.setMapMarker()// eslint-disable-next-line no-undef// 根據(jù)坐標(biāo)獲取位置信息this.geoCoder.getAddress(this.markersPosition, (status, result) => {if (status === 'complete' && result.regeocode) {this.address = result.regeocode.formattedAddressconsole.log('點擊位置信息：', result.regeocode.formattedAddress)// idlet adcode = result.regeocode.addressComponent.adcode// let reg = /.+?(省|市|自治區(qū)|自治州|縣|區(qū))/glet provinceId = parseInt(adcode.substr(0, 2) + '0000')let cityId = parseInt(adcode.substr(0, 4) + '00')let areaId = adcodeconsole.log('點擊位置的省市區(qū)id：', provinceId, cityId, areaId)}})})},// 設(shè)置點擊位置的標(biāo)記setMapMarker () {let marker = new AMap.Marker({map: this.map,position: this.markersPosition})// 將 markers 添加到地圖this.markers.push(marker)},// 添加標(biāo)記addMarker () {// 經(jīng)度 緯度let lng = Math.random() * 135.05 + 73.3let lat = Math.random() * 53.33 + 3.51console.log('添加標(biāo)記', [lng, lat])// 添加標(biāo)記this.map.setFitView()let marker = new AMap.Marker({map: this.map,position: [lng, lat]// content: markerContent// eslint-disable-next-line// offset: new AMap.Pixel(-13, -30)})// 將 markers 添加到地圖this.markers.push(marker)this.map.setFitView()`在這里插入代碼片`// 鼠標(biāo)點擊marker彈出自定義的信息窗體// eslint-disable-next-line no-undefAMap.event.addListener(marker, 'click', function (e) {console.log('點擊marker', e)})},// 刪除之前后的標(biāo)記點removeMarker () {if (this.markers) {this.map.remove(this.markers)}}} } </script><style scoped lang="scss"> #map-container {width: 70vw;height: 70vh; } </style>

總結(jié)

以上是生活随笔為你收集整理的vue项目中使用高德地图实现添加点标记和获取点击位置信息的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。