uniapp的map组件挪动地图获得中心点的坐标以及具体位置的代码

在 UniApp 中使用 map 组件可以获取地图中心点的坐标以及具体位置。下面是一个示例代码：

<template>
  <view class="container">
    <map :latitude="latitude" :longitude="longitude" :scale="scale" @click="getLocation"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.397,
      scale: 15
    };
  },
  methods: {
    getLocation(e) {
      console.log(e.mp.lng, e.mp.lat);
    }
  }
};
</script>

在上面的代码中，我们定义了一个 map 组件，通过 `latitude` 和 `longitude` 属性设置了地图中心点的纬度和经度，通过 `scale` 属性设置了地图的缩放级别。

在 map 组件上绑定了一个 `click` 事件，在事件的回调函数 `getLocation` 中，我们可以通过 `e.mp.lng` 和 `e.mp.lat` 获取地图点击位置的经纬度坐标。

相关问题

uniapp map组件监听鼠标坐标

在UniApp中，Map组件允许开发者监听地图上的鼠标事件，包括点击、移动等。要监听鼠标坐标，你可以使用`map-view`组件提供的`onMarkerdragend`或`onPan`事件。以下是基本的示例：

<view class="container">
  <map-view :latitude="latitude" :longitude="longitude" @markerdragend="handleMarkerDragEnd" @pan="handlePan"></map-view>
</view>

<script>
export default {
  data() {
    return {
      latitude: 39.9042,
      longitude: 116.4074, // 北京位置
      markerLat: null,
      markerLng: null,
    };
  },
  methods: {
    handleMarkerDragEnd(e) {
      this.markerLat = e.detail.lat;
      this.markerLng = e.detail.lng;
      console.log('Marker dragged to:', { lat: this.markerLat, lng: this.markerLng });
    },
    handlePan(e) {
      const { x, y } = e.detail;
      console.log('Map pan event:', { x, y });
    },
  },
};
</script>

在这个例子中，`handleMarkerDragEnd`会在标记拖动结束时触发，获取新的经纬度；而`handlePan`则会在地图平移时提供当前鼠标的位置。

uniapp map组件可以拿到鼠标悬停坐标吗

UniApp Map组件确实支持获取鼠标悬停时的位置信息。通过监听`onMarkerMove`事件，可以在地图上某个标记（marker）上添加一个处理函数，这个函数会在用户鼠标移动到标记上方时触发，并提供当前的悬停坐标。你可以这样做：

<template>
  <view>
    <map :zoom="zoom" @markerMove="handleMarkerMove">
      <!-- ...地图配置... -->
      <marker v-for="(marker, index) in markers" :key="index" :position="marker.position" @move="handleMarkerMove">
        <!-- ...其他marker属性... -->
      </marker>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      zoom: 10,
      markers: [
        // ...你的标记数据...
      ]
    };
  },
  methods: {
    handleMarkerMove(e) {
      const { coordinate } = e.detail; // 获取悬停坐标
      console.log('悬停坐标:', coordinate);
    }
  }
};
</script>

在这个例子中，当鼠标悬停在任何标记上时，`handleMarkerMove`方法会被调用，并打印出当前的悬停坐标。