uni-app nvue页面实现map

 

 

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