使用uniapp自带的地图组件获取定位并使用地图展示

你可以使用uni-app提供的地图组件来获取定位信息并展示地图。首先，确保你已经在manifest.json文件中添加了地图的权限配置，如下所示：

{
  "mp-weixin": {
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序的定位功能"
      }
    }
  }
}

然后，在你需要展示地图的页面中，使用uni-app提供的地图组件，如下所示：

<template>
  <view class="container">
    <map :longitude="longitude" :latitude="latitude" :covers="markers" @markertap="markerTap"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 0, // 经度
      latitude: 0, // 纬度
      markers: [], // 标记点
    };
  },
  methods: {
    // 获取定位
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          // 设置标记点
          this.markers = [{
            id: 1,
            longitude: res.longitude,
            latitude: res.latitude,
            iconPath: '/static/location.png',
            width: 32,
            height: 32,
          }];
        },
        fail: (err) => {
          console.log('获取定位失败', err);
        },
      });
    },
    // 点击标记点触发的事件
    markerTap(e) {
      console.log('点击标记点', e);
    },
  },
  onShow() {
    this.getLocation();
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}
</style>

在上述代码中，我们使用了uni.getLocation()方法来获取用户的定位信息，并将经纬度保存到data中的longitude和latitude变量中。然后，我们将这些定位信息传递给地图组件的longitude和latitude属性，以展示地图。

同时，我们还设置了一个标记点，使用markers数组保存标记点的信息，并在地图上展示出来。你可以根据自己的需求自定义标记点的图标、大小等属性。

最后，在markertap事件中，你可以处理用户点击标记点触发的逻辑。在本例中，我们仅仅在控制台输出了点击事件的信息，你可以根据自己的需求进行相应的操作。

请注意，上述代码是基于微信小程序平台的示例，如果你的目标平台是其他平台，请根据对应平台的文档进行相应的配置和调整。