uni-app 地图标记点循环显示所有marker

你的名字 2021-09-07 06:06 2483阅读 2赞

<template>
    	//uniapp 地图插件引入
    	<view class="uni-common-mt" style="margin:0">
    		<view>
    			<map :latitude="latitude" :longitude="longitude" :markers="covers" v-if="mapCanLoad">
    			</map>
    		</view>
    	</view>
    	//地图插件引用结束	
    <template>

<script>
    	export default{ 
    		data(){ 
    			return{ 
    				mapCanLoad:false,
    				covers:[], //插入标记的数组
    				title:'map',
    				latitude:'',//默认经纬度
    				longitude:''
    			}
    		},
    		onShow(){ 
    			this.$http.get('/接口名',{ 
    			//请求接口的参数
    			user_id:'',
    		}).then(res => { 
    			if(res.result = 1){  //判断后台的接口状态，成功
    				res.data.data.station.forEach(item =>{  // foreach循环接口返回的值
    					this.covers.push({ 	//往里面添加循环数据
    							id: item.station_id,
    							latitude: item.station_lat,
    							longitude: item.station_long,
    							iconPath: "/static/img/home/yunwei.png",
    							width: 40,
    							height: 45,
    							callout: { 
    								content: item.station_name,
    								textAlign: 'center',
    								borderRadius: 4,
    								padding: 4,
    								display: 'ALWAYS'
    							}
    					})
    				})
    				this.mapCanLoad = true;
    			}else{  //接口错误警报
    				uni.showToast({ 
    					icon:'none',
    					title:res.data.msg //打印报错信息
    				})
    				this.mapCanLoad = true
    			}
    		})
    		}
    	}
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，2483人围观）

还没有评论，来说两句吧...

相关阅读

相关高德地图地图层级不同显示marker数量不同

页面渲染获取经纬度数据（mapData）以后初始化地图initMap()方法页面效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

小灰灰/ 2023年02月17日 05:07/ 0 赞/ 159 阅读

相关 Python，地理地图可视化：plotly绘制mapbox地图城市中心点经纬度marker标记

Python地理地图可视化：plotly标记mapbox地图城市中心点经纬度marker import plotly.graph_objects as go

╰半夏微凉°/ 2022年12月27日 14:14/ 0 赞/ 243 阅读

相关 maptalks地图控制器、限制拖动区域、marker标记、导出示例

// 地图控制器 <template lang="pug"> .main map.container

╰+哭是因爲堅強的太久メ/ 2022年09月12日 08:58/ 0 赞/ 621 阅读

相关百度地图Marker隐藏/显示

1. 隐藏Marker function hiddenMarker(eventtype)\{ var allOverlay = map.getOverlays(); f

迈不过友情╰/ 2022年06月14日 06:55/ 0 赞/ 1054 阅读

相关安卓百度地图显示地图上所有的点(Marker)

由于公司项目中有这样的需求，需要一键显示当前项目中所有的marker点。最开始没有仔细看百度地图的api，所以自己想解决办法。开始的想法是：获取到所有点的最大经度

迷南。/ 2022年03月15日 04:56/ 0 赞/ 495 阅读

相关高德地图js API实现多点标记marker，多点marker移除和鼠标滑入标点显示提示框

官方API：[https://lbs.amap.com/api/javascript-api/guide/abc/prepare][https_lbs.amap.com_api

╰半夏微凉°/ 2022年02月28日 09:10/ 0 赞/ 1121 阅读

相关 uni-app 地图标记点循环显示所有marker

<template> //uniapp 地图插件引入 <view class="uni-common-mt" style="margin:0">

你的名字/ 2021年09月07日 06:06/ 2 赞/ 2484 阅读

相关 uniapp地图-标记点-多点连线

前言：正在使用uniapp开发地图这块不明白的小伙伴可以看看我以下的代码分享;下面是我开发中使用vue+uniapp遇到的地图问题，有的APP涉及到地理位置的功能，所以，地图

深碍√TFBOYSˉ_/ 2021年08月20日 02:01/ 0 赞/ 903 阅读

相关 uniapp地图-删除标记点

前言：本篇文章衔接了【[uniapp地图-标记点-多点连线][uniapp_-_-]】文章;下面是一个示例，用到的是本地数组，以及地图的标记点点击事件@markertap，点击

た入场券/ 2021年08月19日 22:53/ 0 赞/ 880 阅读

相关 uniapp地图-点击添加标记点

前言：这篇文章讲述的是map标签的@tap点击地图事件;添加的标记点都是保存在markers数组里面,点击地图就会获取点击的位置的经纬度，然后在point里面追加了iconPa

迈不过友情╰/ 2021年08月19日 13:27/ 0 赞/ 3130 阅读