vue3 腾讯地图拖动标记获取经纬度

你可以使用腾讯地图的 `Marker` 类来创建标记，并且监听 `dragend` 事件来获取标记位置的经纬度信息。具体实现如下：

1. 在 HTML 中添加地图容器和标记容器：

<div id="map"></div>
<div id="marker"></div>

2. 在 JavaScript 中创建地图和标记：

// 初始化地图
var map = new qq.maps.Map(document.getElementById("map"), {
  center: new qq.maps.LatLng(39.916527, 116.397128),
  zoom: 13,
});

// 创建标记
var marker = new qq.maps.Marker({
  position: map.getCenter(),
  draggable: true,
  map: map,
});

// 监听标记拖动结束事件
qq.maps.event.addListener(marker, "dragend", function (event) {
  // 获取标记位置的经纬度信息
  var latLng = marker.getPosition();
  console.log("经度：" + latLng.getLng() + "，纬度：" + latLng.getLat());
});

这样就可以在地图上拖动标记，并且在控制台中输出标记位置的经纬度信息了。

相关问题

vue3 使用腾讯地图拖动标记获取经纬度详细步骤

好的，下面是详细的步骤：

1. 在 HTML 中地图容器和标记容器：

<template>
  <div class="map-container">
    <div class="map" ref="map"></div>
    <div class="marker" ref="marker"></div>
  </div>
</template>

2. 在 `setup()` 函数中引入腾讯地图的 API 和样式文件，并创建地图和标记：

import { onMounted, ref } from "vue";

export default {
  setup() {
    // 引入腾讯地图 API 和样式文件
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY_HERE";
    script.onload = () => {
      // 创建地图和标记
      const map = new qq.maps.Map(document.getElementById("map"), {
        center: new qq.maps.LatLng(39.916527, 116.397128),
        zoom: 13,
      });

      const marker = new qq.maps.Marker({
        position: map.getCenter(),
        draggable: true,
        map: map,
      });

      // 监听标记拖动结束事件
      qq.maps.event.addListener(marker, "dragend", function (event) {
        // 获取标记位置的经纬度信息
        const latLng = marker.getPosition();
        console.log("经度：" + latLng.getLng() + "，纬度：" + latLng.getLat());
      });
    };
    document.head.appendChild(script);

    return {};
  },
};

3. 在 `mounted()` 函数中获取地图和标记容器的 DOM 节点：

import { onMounted, ref } from "vue";

export default {
  setup() {
    // ...

    onMounted(() => {
      // 获取地图和标记容器的 DOM 节点
      const mapContainer = document.getElementById("map");
      const markerContainer = document.getElementById("marker");

      // 设置地图和标记容器的宽度和高度
      mapContainer.style.width = "100%";
      mapContainer.style.height = "400px";
      markerContainer.style.width = "32px";
      markerContainer.style.height = "32px";

      // 将标记容器作为标记的图标
      marker.setIcon(
        new qq.maps.MarkerImage(
          "http://open.map.qq.com/doc/img/n_marker.png",
          null,
          null,
          null,
          new qq.maps.Size(32, 32)
        )
      );
      marker.set("offset", new qq.maps.Size(0, 0));
      marker.set("iconAnchor", new qq.maps.Point(16, 16));
      marker.set("shadow", new qq.maps.MarkerImage(null, null, null, null, new qq.maps.Size(0, 0)));
      markerContainer.appendChild(marker.get("container"));
    });

    return {};
  },
};

4. 最后在 CSS 中设置地图容器的样式：

.map-container {
  position: relative;
}

.map {
  position: relative;
  z-index: 1;
}

.marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

这样就完成了使用腾讯地图拖动标记获取经纬度的操作。

vue3 高德地图输入地点获取经纬度

Vue3中使用高德地图API获取用户输入地点的经纬度，通常需要以下几个步骤：

1. **安装依赖**：首先在项目中安装`vue-amap`库，这是一个方便集成高德地图的UI组件和插件，可以快速接入高德地图API。

   npm install vue-amap @vue-amap/core @vue-amap/geolocation

2. **引入并配置**：在Vue文件中引入组件，并在Vue的原型上注册AMap实例，以便后续使用。

   import { AMapLoader } from '@vue-amap/core'
   import Geolocation from '@vue-amap/geolocation'

   export default {
     setup() {
       return new Promise((resolve, reject) => {
         AMapLoader.init({
           key: 'your_amap_key', // 替换为你的高德地图API密钥
         }).then(() => {
           const map = new AMap.Map('container', {
             zoom: 15,
             center: [116.404, 39.915], // 北京坐标，作为初始位置
           })
           new Geolocation({
             enableHighAccuracy: true, // 提供更精确的位置信息，默认值为true
             timeout: 10000, // 超时时间，单位毫秒
             showButton: false, // 是否显示定位按钮，默认隐藏
           }).on('complete', function(position) {
             resolve({ lat: position.latitude, lng: position.longitude }) // 返回经纬度
           });
         });
       })
     }
   }

3. **创建元素**：在HTML模板中创建一个用于输入地点的input字段和显示经纬度的地方。

   <div id="app">
     <input v-model="searchText" placeholder="请输入地址...">
     <p>经度: {{ lat }}</p>
     <p>纬度: {{ lng }}</p>
   </div>

当用户在输入框中输入地址后，你可以通过监听v-model变化来触发地图的地点查找，并获取经纬度。