uni-app 高德地图地图选址组件

针对uni-app中使用高德地图进行选址的需求，可以通过集成高德地图的JS API来实现一个选址组件。以下是一个简单的示例代码，展示了如何在uni-app中集成高德地图并实现基本的选址功能。

首先，你需要在高德开放平台申请一个API Key，并确保在项目中正确引入了高德地图的SDK。

1. 在manifest.json中配置高德地图SDK

"mp-weixin": {
    "appid": "YOUR_APPID",
    "setting": {
        "urlCheck": false
    },
    "usingComponents": true,
    "permission": {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
    },
    "sdkConfigs": {
        "amap": {
            "version": "2.0",
            "key": "YOUR_AMAP_KEY"
        }
    }
}

注意：这里的配置是针对微信小程序的，其他平台配置方式类似，但可能有所不同。

1. 在页面中引入高德地图并创建选址组件

<template>
  <view>
    <map 
      id="map" 
      longitude="{{longitude}}" 
      latitude="{{latitude}}" 
      scale="14" 
      markers="{{markers}}"
      style="width: 100%; height: 300px;"
      @tap="onMapTap"
    ></map>
    <button @click="chooseLocation">选择位置</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.397428, // 默认经度
      latitude: 39.90923,   // 默认纬度
      markers: []           // 标记点
    };
  },
  methods: {
    onMapTap(e) {
      const { longitude, latitude } = e.detail;
      this.chooseLocationResult(longitude, latitude);
    },
    chooseLocation() {
      // 调用高德地图选址插件（这里假设已集成高德地图选址插件）
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.chooseLocationResult(res.longitude, res.latitude);
        }
      });
    },
    chooseLocationResult(longitude, latitude) {
      this.longitude = longitude;
      this.latitude = latitude;
      this.markers = [{
        id: 1,
        longitude: longitude,
        latitude: latitude,
        iconPath: '/static/marker.png', // 自定义标记图标路径
        width: 50,
        height: 50
      }];
    }
  }
};
</script>

注意：上述代码中的chooseLocation方法只是一个占位符，实际开发中应使用高德地图提供的选址插件或API来完成选址功能。高德地图提供了丰富的选址组件和API，你可以根据需求选择合适的组件进行集成。

此外，为了优化用户体验，你可以在选址完成后添加一些额外的处理逻辑，比如将选中的位置信息保存到本地或发送到服务器。