uni-app 小程序通用版地图插件

针对uni-app小程序通用版地图插件的需求，以下是一个简单的代码示例，展示了如何在uni-app中使用地图组件及其基本功能。

首先，在pages/index/index.vue文件中，添加地图组件：

<template>
  <view class="container">
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      :markers="markers"
      show-location
      style="width: 100%; height: 500px;"
      @tap="onMapTap"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.397428, // 默认经度
      latitude: 39.90923, // 默认纬度
      scale: 15, // 缩放级别
      markers: [
        {
          id: 1,
          latitude: 39.90923,
          longitude: 116.397428,
          title: '北京',
          iconPath: '/static/marker.png', // 自定义图标路径
          width: 50,
          height: 50
        }
      ]
    };
  },
  methods: {
    onMapTap(e) {
      const { longitude, latitude } = e.detail;
      this.longitude = longitude;
      this.latitude = latitude;
      this.markers = [
        {
          id: 1,
          latitude,
          longitude,
          title: '当前位置',
          iconPath: '/static/marker.png',
          width: 50,
          height: 50
        }
      ];
      console.log('地图点击位置：', { longitude, latitude });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

在这个示例中，我们使用了uni-app提供的<map>组件来展示地图。主要属性包括：

• longitude和latitude：用于设置地图的中心点经纬度。
• scale：地图缩放级别。
• markers：地图上的标记点数组，每个标记点包含id、latitude、longitude、title、iconPath、width和height等属性。
• show-location：显示当前位置。

此外，我们监听了地图的tap事件，当用户点击地图时，会获取点击位置的经纬度，并更新标记点的位置。

请注意，为了自定义标记图标，你需要在项目的/static目录下放置一个名为marker.png的图片文件，或者根据你的项目结构调整图标路径。

这个示例仅展示了地图组件的基本用法，你可以根据需求进一步扩展功能，比如添加控制组件、路线规划等。希望这个示例对你有所帮助！