当前位置: 首页 > news >正文

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);
                    }
                });
            },

最后显示效果:

http://www.lryc.cn/news/374659.html

相关文章:

  • k8s_探针专题
  • MySQL触发器基本结构
  • 前缀和(一维前缀和+二维前缀和)
  • web前端五行属性:深入探索与实战解析
  • 白酒:茅台镇白酒的酒厂社会责任与可持续发展
  • 音视频开发_SDL音频播放器的实现
  • C语言学习系列:初识C语言
  • 利用反向代理编写HTTP抓包工具——可视化界面
  • 下拉框数据被遮挡 且 后续数据无法下拉的 解决方法
  • 课设--学生成绩管理系统(二)
  • STM32CubeMX配置-外部中断配置
  • 基于Vue的日程排班表 - common-schedule
  • SmartEDA、Multisim、Proteus大比拼:电路设计王者之争?
  • 【教资科一传统文化】文化素养传统文化之神话传说、天文历法、古代称谓、中国传统节日、成语典故
  • Apache Pulsar 从入门到精通
  • [Bug]使用duckduckgo的duckduckgo_search API搜索图片出现了错误
  • 线程池若干问题
  • k8s+RabbitMQ单机部署
  • github.com/therecipe/qt windows中安装
  • LogicFlow 学习笔记——11. 对齐线 和 键盘快捷键
  • FastWeb - Lua开源跨平台网站开发服务
  • 原子阿波罗STM32F767程序的控制器改为STM32F407驱动LCD屏
  • 04-jQuery工具函数及 jQuery 插件
  • 基于Python的花卉识别分类系统【W9】
  • Visual Studio Code 配置教程,手把手教你如何配置
  • 教案:Horovod v0.2 介绍与使用
  • 深入探索Spring Boot:原理与实践
  • 基于SSM框架的电影院售票网站
  • oracle发送http请求
  • 软件回归测试:策略及案例分析