uni-app-地图中心设置图标-获取坐标

最新推荐文章于 2025-05-26 14:48:56 发布

Ethan__Han

最新推荐文章于 2025-05-26 14:48:56 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： javascript vue.js uni-app

本文链接：https://blog.csdn.net/Poseidon__ming/article/details/121979017

本文介绍了如何在uni-app中设置地图中心的图标，并通过getCenterLocation方法获取坐标，强调真机测试的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在地图中加入一个自己需要的图标，一般使用图片，定位方便

<map
    style="width: 100%; height: 100%;"
    id="map"
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
    :scale='scale'
    :circles="circles"
    @markertap='toChangePoint'
    show-location='true'
>
    <image class="mapCenter" src="@/static/cross.png"></image>
</map>

2. 设置样式

注意，最好把定位点放在地图中心，方便获取坐标

.mapCenter {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

3. 调用getCenterLocation方法

const add = res => {
    console.log('当前坐标==>',res.latitude,res.longitude)
    // 向点位数组中添加一个点位
    this.markers.push({
        id:this.markers.length,
        latitude: res.latitude,
        longitude: res.longitude,
        iconPath: '../../../static/location.png',
    })
}
uni.createMapContext('map', this).getCenterLocation({
    success: