uni-app 实现Android和ios双端拖拽获取地址功能 使用google map

在uni-app中实现Android和iOS双端拖拽获取地址功能，可以利用Google Maps提供的API来实现。下面是一个简单的代码示例，展示了如何在uni-app中使用Google Maps API，并处理地图拖拽事件来获取地址。

步骤一：配置Google Maps API Key

首先，你需要在Google Cloud Platform上创建一个项目并启用Google Maps JavaScript API，然后获取API Key。

步骤二：在uni-app项目中引入Google Maps

1. 安装依赖： 确保你已经安装了@dcloudio/uni-ui和@dcloudio/types（如果还没有）。

2. 页面代码： 在pages/index/index.vue中，编写以下代码：

<template>
  <view class="container">
    <map
      id="map"
      longitude="116.404"
      latitude="39.915"
      scale="14"
      :markers="markers"
      @dragend="onDragEnd"
      style="width: 100%; height: 100%;"
    ></map>
    <view class="address">{{ address }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      markers: [{ id: 1, latitude: 39.915, longitude: 116.404 }],
      address: '',
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY', // 替换为你的API Key
    };
  },
  methods: {
    onDragEnd(e) {
      const { latitude, longitude } = e.detail.marker;
      this.getGeocodeAddress(latitude, longitude);
    },
    getGeocodeAddress(latitude, longitude) {
      const geocodeUrl = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${this.apiKey}`;
      uni.request({
        url: geocodeUrl,
        success: (res) => {
          const address = res.data.results[0].formatted_address;
          this.address = address;
        },
        fail: (err) => {
          console.error('Failed to get address:', err);
        },
      });
    },
  },
};
</script>

<style>
.container {
  position: relative;
  height: 100vh;
}
.address {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 5px;
}
</style>

注意事项

1. API Key：确保你已经替换了YOUR_GOOGLE_MAPS_API_KEY为实际获取的API Key。
2. 权限：在iOS和Android平台上，确保已经配置了相应的网络权限，以便能够访问Google Maps API。
3. API 限制：Google Maps API有使用限制和费用，请根据实际情况评估使用。

以上代码展示了如何在uni-app中实现拖拽地图后获取地址的功能。通过监听dragend事件，并在事件处理函数中调用Google Maps Geocoding API来获取拖拽后的地址。