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

}

});

},

最后显示效果:

相关推荐
懒羊羊不懒@14 分钟前
Java基础语法—最小单位、及注释
java·c语言·开发语言·数据结构·学习·算法
ss27318 分钟前
手写Spring第4弹: Spring框架进化论:15年技术变迁:从XML配置到响应式编程的演进之路
xml·java·开发语言·后端·spring
DokiDoki之父29 分钟前
MyBatis—增删查改操作
java·spring boot·mybatis
2501_9160074736 分钟前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
兩尛1 小时前
Spring面试
java·spring·面试
Java中文社群1 小时前
服务器被攻击!原因竟然是他?真没想到...
java·后端
Full Stack Developme1 小时前
java.nio 包详解
java·python·nio
浪裡遊1 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
零千叶1 小时前
【面试】Java JVM 调优面试手册
java·开发语言·jvm
代码充电宝2 小时前
LeetCode 算法题【简单】290. 单词规律
java·算法·leetcode·职场和发展·哈希表