uniapp地图自定义文字和图标

这是我的结构:

<map class='map' id="map" :latitude="latitude" :longitude="longitude" @markertap="handleMarkerClick"   :show-location="true" :markers="covers"  />

记住别忘了在data中定义变量:

                latitude: '', // 初始纬度  
                longitude: '', // 初始经度   
                covers: [], // 覆盖物数组  

然后请求位置:

getMyLocation() {
                uni.getLocation({
                    type: 'wgs84',
                    success: (res) => {
                        this.jinweidu = res.longitude + ',' + res.latitude
                        this.latitude = res.latitude
                        this.longitude = res.longitude
                        //这是我的请求可以换成你们请求的接口
                        this.$u.get("/app/store/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then(
                         res => {
                              if (res.code == 200) {
                                  this.listmap = res.data
                                  res.data.forEach(item => { //这是将请求的数据循环并且每个更换图标和文字
                                        const shopCover = { 
                                            id: parseFloat(item.storeId),
                                            latitude: item.lat,
                                            longitude: item.lng,
                                            width: 25,
                                            height: 30,
                                            iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uZXgsJE6hXbRSwbKILB4',
                                            label: {
                                                content: item.name,
                                                fontWeight: 700,
                                                color: '#8883F0',
                                                textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
                                                style: {

                                                },
                                            }
                                        };
                                        this.covers.push(shopCover) //最后将更改好的数据放到地图数组中
                                    });
                                }
                            });
                    },
                    fail: (err) => {
                        console.error('获取位置失败:', err);
                    }
                });
            },

最后显示效果:

  • 22
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值