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

}

});

},

最后显示效果:

相关推荐
binishuaio3 分钟前
Java 第11天 (git版本控制器基础用法)
java·开发语言·git
zz.YE5 分钟前
【Java SE】StringBuffer
java·开发语言
老友@5 分钟前
aspose如何获取PPT放映页“切换”的“持续时间”值
java·powerpoint·aspose
wrx繁星点点20 分钟前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
Upaaui23 分钟前
Aop+自定义注解实现数据字典映射
java
zzzgd81623 分钟前
easyexcel实现自定义的策略类, 最后追加错误提示列, 自适应列宽,自动合并重复单元格, 美化表头
java·excel·表格·easyexcel·导入导出
友善的鸡蛋24 分钟前
解决:使用EasyExcel导入Excel模板时出现数据导入不进去的问题
java·easyexcel·excel导入
星沁城25 分钟前
240. 搜索二维矩阵 II
java·线性代数·算法·leetcode·矩阵
熊的猫28 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
NoneCoder37 分钟前
Java企业级开发系列(1)
java·开发语言·spring·团队开发·开发