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

}

});

},

最后显示效果:

相关推荐
专注API从业者几秒前
Python/Java 代码示例:手把手教程调用 1688 API 获取商品详情实时数据
java·linux·数据库·python
奔跑吧邓邓子21 分钟前
【Java实战㉝】Spring Boot实战:从入门到自动配置的进阶之路
java·spring boot·实战·自动配置
ONLYOFFICE22 分钟前
【技术教程】如何将ONLYOFFICE文档集成到使用Spring Boot框架编写的Java Web应用程序中
java·spring boot·编辑器
叫我阿柒啊30 分钟前
Java全栈开发工程师的实战面试经历:从基础到微服务
java·微服务·typescript·vue·springboot·前端开发·后端开发
Jerry33 分钟前
使用 Material 3 在 Compose 中设置主题
前端
耶啵奶膘39 分钟前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹41 分钟前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
cyforkk1 小时前
Spring 异常处理器:从混乱到有序,优雅处理所有异常
java·后端·spring·mvc
生擒小朵拉1 小时前
STM32添加库函数
java·javascript·stm32
Z_z在努力1 小时前
【杂类】Spring 自动装配原理
java·spring·mybatis