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

}

});

},

最后显示效果:

相关推荐
所待.3833 分钟前
JavaEE之线程初阶(上)
java·java-ee
Winston Wood7 分钟前
Java线程池详解
java·线程池·多线程·性能
手握风云-11 分钟前
数据结构(Java版)第二期:包装类和泛型
java·开发语言·数据结构
Amd79415 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You23 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
喵叔哟31 分钟前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
狸克先生35 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
尘浮生37 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端