zoukankan      html  css  js  c++  java
  • uni-app nvue页面实现map

    <template>
        <view class="content">
    		 <map :style="`${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',
    				        				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>
    

      

  • 相关阅读:
    linux brige中mac地址的比较
    BCM6358 加上TTL线 OPENWRT刷机全方位教程
    BCM6358 进入CFE界面
    BCM6358编译openwrt并刷机
    BCM6358开发板硬件资源 【OPENWRT刷机全方位教程】
    WRT54GS openwrt pppoe拨号
    CentOS6.5安装JDK1.8
    Sql Server 事物
    linux系统中的删除操作
    Java学习-集合的理解
  • 原文地址:https://www.cnblogs.com/lemonmoney/p/14750148.html
Copyright © 2011-2022 走看看