首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue高德地图获取点击位置信息

vue使用高德地图实现添加点标记和获取点击位置信息的示例代码

2024-01-23 15:07:13 作者：浮桥

这篇文章主要介绍了vue使用高德地图实现添加点标记和获取点击位置信息的示例代码,文中补充介绍了高德vue-amap使用（一）标记点位获取地址及经纬度,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧

vue项目中使用高德地图实现添加点标记和获取点击位置信息

<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-undef
      this.map = new AMap.Map('map-container', {
        zoom: 11, // 级别
        // center: [116.397428, 39.90923], // 中心点坐标
        // layers: [ // 使用多个图层
        //   // 卫星
        //   new AMap.TileLayer.Satellite(),
        //   // 路网
        //   new AMap.TileLayer.RoadNet()
        // ],
        resizeEnable: true
        // viewMode: '3D'// 使用3D视图
      })
      // eslint-disable-next-line no-undef
      this.geoCoder = new AMap.Geocoder()
      this.handlerMapClick()
    },
    handlerMapClick () {
      this.map.on('click', (e) => {
        // 点击坐标
        this.markersPosition = [e.lnglat.lng, e.lnglat.lat]
        this.removeMarker()
        // 设置新的标记
        this.setMapMarker()
        // eslint-disable-next-line no-undef
        // 根据坐标获取位置信息
        this.geoCoder.getAddress(this.markersPosition, (status, result) => {
          if (status === 'complete' && result.regeocode) {
            this.address = result.regeocode.formattedAddress
            console.log('点击位置信息：', result.regeocode.formattedAddress)
            // id
            let adcode = result.regeocode.addressComponent.adcode
            //   let reg = /.+?(省|市|自治区|自治州|县|区)/g
            let provinceId = parseInt(adcode.substr(0, 2) + '0000')
            let cityId = parseInt(adcode.substr(0, 4) + '00')
            let areaId = adcode
            console.log('点击位置的省市区id：', provinceId, cityId, areaId)
          }
        })
      })
    },
    // 设置点击位置的标记
    setMapMarker () {
      let marker = new AMap.Marker({
        map: this.map,
        position: this.markersPosition
      })
      // 将 markers 添加到地图
      this.markers.push(marker)
    },
    // 添加标记
    addMarker () {
      //   经度 纬度
      let lng = Math.random() * 135.05 + 73.3
      let lat = Math.random() * 53.33 + 3.51
      console.log('添加标记', [lng, lat])
      // 添加标记
      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()`在这里插入代码片`
      // 鼠标点击marker弹出自定义的信息窗体
      // eslint-disable-next-line no-undef
      AMap.event.addListener(marker, 'click', function (e) {
        console.log('点击marker', e)
      })
    },
    // 删除之前后的标记点
    removeMarker () {
      if (this.markers) {
        this.map.remove(this.markers)
      }
    }
  }
}
</script>
<style scoped lang="scss">
#map-container {
    width: 70vw;
    height: 70vh;
}
</style>

高德vue-amap使用（一）标记点位获取地址及经纬度

图片示例

准备工作

高德开放平台：https://lbs.amap.com/

注册登录后进入控制台，在应用管理下我的应用里创建应用添加key，就可以看到你的安全密钥了

安装与配置

npm安装

npm install vue-amap --save

main.js配置

import VueAMap from 'vue-amap'; //引入高德地图
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '14efe7b9c0a51017c1ee7c641758ba69',
  plugin: [ // 这里根据自己项目按需引入插件
    'AMap.Autocomplete', 
    'AMap.PlaceSearch', 
    'AMap.Scale',
    'AMap.OverView', 
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.PolyEditor', 
    'AMap.CircleEditor',// 圆形编辑器插件
	"AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
	"AMap.Geocoder", // 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
	"AMap.CitySearch",
  ]
});
window._AMapSecurityConfig = {
  securityJsCode:'你的安全密钥',
}
// 解决高德地图刷新显示不出来
const amapKeys = Object.keys(localStorage).filter(key => key.match(/^_AMap_/))
amapKeys.forEach(key => { localStorage.removeItem(key) })

使用

父组件

1.html部分

<el-form-item label="设备位置">
  <el-button class="dev-product" @click="openMap()">
    <span class="text"  :class="mapInfo.lat?'active':''">{{addressTip}}</span><i class="el-icon-more"></i>
  </el-button>
  <div v-if="mapInfo.lat&&mapInfo.lng">经度：{{mapInfo.lng}}，纬度：{{mapInfo.lat}}</div>
</el-form-item>

<el-dialog title="设备位置" :visible.sync="map" width="900px" id="map">
   <amap @mapDing="getCoordinate" :Nowlnglat="Nowlnglat"></amap>
   <div slot="footer" class="dialog-footer">
     <el-button @click="map = false" class="button-minwidth">{{$t('Base.cancels')}}</el-button>
     <el-button type="primary" @click="submitMap" class="button-minwidth">{{$t('Base.confirms')}}</el-button>
   </div>
</el-dialog>

2.js部分

<script>
import amap from "../map.vue"
export default {
  components: {amap},
  data() {
    return {
      addressTip:'请选择设备位置',
      map:false,
      mapInfo:{},
      Nowlnglat:[],//经纬度传值
      lng:113.03,
      lat:28.13
    }
  },
  methods: {
    openMap(){
      this.map=true
      if(this.lng&&this.lat){
        this.mapInfo={
          lng:this.lng,
          lat:this.lat
        }
        this.Nowlnglat=[this.lng,this.lat]
      }
    },
    getCoordinate(map){
      this.mapInfo=map
    },
    submitMap(){
      this.map=false
      this.addressTip=this.mapInfo.address
    }
  }
</script>

3.css部分

<style lang="scss" scoped>
  .dev-product{
    width: 300px;
    height: 32px;
    padding: 0 8px;
    display: flex;
    align-items: center;
  ::v-deep span{
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    .text{
      width: 92%;
      color: #c0c4cc;
    }.active{
      width: 92%;
      color: #303133 ;
    }
    i{
      color:#D8D8D8
    }
  }
}
</style>

子组件