• uniapp地图自定义文字和图标


    这是我的结构:

    记住别忘了在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);
                        }
                    });
                },

    最后显示效果:

  • 相关阅读:
    神经网络分类算法是什么,神经网络分类算法简介
    Python实现WOA智能鲸鱼优化算法优化循环神经网络分类模型(LSTM分类算法)项目实战
    《CRFL:Certifiably Robust Federated Learning against Backdoor Attacks》
    【编译原理】概述
    HCIP 第十七天
    中小学生使用全光谱台灯对眼睛好不好?2023口碑好的护眼台灯推荐
    40个高质量ssm+vue毕设项目分享【源码+论文】(一)
    jdk和cglib动态代理
    docker制作镜像
    Typora更改主题样式
  • 原文地址:https://blog.csdn.net/m0_74170441/article/details/139601370