您可以使用Vue和腾讯地图的API来获取marker移动后的定位。具体步骤如下:

  1. 创建一个腾讯地图实例,并在地图上添加一个marker。
<template>
  <div id="map"></div>
</template>

<script>
  import TencentMap from '@tencent/map';

  export default {
    name: 'Map',
    data() {
      return {
        map: null,
        marker: null
      }
    },
    mounted() {
      // 创建地图实例
      this.map = new TencentMap.Map('map', {
        center: new TencentMap.LatLng(39.92, 116.46),
        zoom: 13
      });
      // 添加marker
      this.marker = new TencentMap.Marker({
        position: new TencentMap.LatLng(39.92, 116.46),
        map: this.map
      });
    }
  }
</script>
  1. 监听marker的dragend事件,当marker移动后获取其经纬度。
<template>
  <div id="map"></div>
</template>

<script>
  import TencentMap from '@tencent/map';

  export default {
    name: 'Map',
    data() {
      return {
        map: null,
        marker: null
      }
    },
    mounted() {
      // 创建地图实例
      this.map = new TencentMap.Map('map', {
        center: new TencentMap.LatLng(39.92, 116.46),
        zoom: 13
      });
      // 添加marker
      this.marker = new TencentMap.Marker({
        position: new TencentMap.LatLng(39.92, 116.46),
        map: this.map,
        draggable: true
      });
      // 监听marker的dragend事件
      TencentMap.event.addListener(this.marker, 'dragend', () => {
        console.log(this.marker.getPosition().getLng(), this.marker.getPosition().getLat());
      });
    }
  }
</script>
  1. 在dragend事件中获取marker的经纬度,并进行相应的操作。
<template>
  <div id="map"></div>
</template>

<script>
  import TencentMap from '@tencent/map';

  export default {
    name: 'Map',
    data() {
      return {
        map: null,
        marker: null,
        position: null
      }
    },
    mounted() {
      // 创建地图实例
      this.map = new TencentMap.Map('map', {
        center: new TencentMap.LatLng(39.92, 116.46),
        zoom: 13
      });
      // 添加marker
      this.marker = new TencentMap.Marker({
        position: new TencentMap.LatLng(39.92, 116.46),
        map: this.map,
        draggable: true
      });
      // 监听marker的dragend事件
      TencentMap.event.addListener(this.marker, 'dragend', () => {
        this.position = {
          lng: this.marker.getPosition().getLng(),
          lat: this.marker.getPosition().getLat()
        };
        console.log(this.position);
        // 在这里可以进行相应的操作,比如将经纬度保存到数据库中
      });
    }
  }
</script>
vue+腾讯地图怎么获取marker移动后的定位

原文地址: https://www.cveoy.top/t/topic/bnPs 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录