<template>
<view class="content">
<map :style="`width:${windowWidth}px; height: ${windowHeight}px;`"
:latitude="latitude" :longitude="longitude"
:markers="marker" :scale="scale" enable-zoom=true></map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.909,
longitude: 116.39742,
markers:[],
scale:4,
windowWidth:0,
windowHeight:0,
}
},
computed:{
marker(){
return this.markers.slice(0);
}
},
onLoad() {
var that=this;
uni.getSystemInfo({
success: function(res) {
that.windowWidth = res.windowWidth;
that.windowHeight = res.windowHeight;
}
})
that.getMapList();
},
methods: {
//地图数据
getMapList:function(){
var that=this;
uni.showLoading({
title: '加载中'
})
uni.request({
url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
success: (res) => {
if (res.data.code === 200 || res.data.msg === "操作成功") {
that.markers=[];
res.data.list.forEach((item,index)=>{
if(item.value!="0"){
var marker=[{
id:index+1,
latitude:item.lat,
longitude:item.lng,
iconPath:'../../../static/20210419/redmap.png',
width:30,
height:30,
callout:{
content:`${item.name}: ${item.value}`,
fontSize:14,
borderWidth:2,
padding:10,
borderRadius:8,
display:'BYCLICK',
textAlign:'center'
}
}];
that.markers.push.apply(that.markers,marker);
}
})
uni.hideLoading();
}else{
uni.hideLoading();
}
}
});
}
}
}
</script>
