uniapp开发小程序时map地图使用

目录

1.地图显示

2.地图添加点位

1.直接使用markers属性

2.使用地图组件控制

3.marker点击事件

4.移动地图到指定的坐标

5.监听地图拖拽

监听拖拽的作用

---

1.地图显示

uniapp地图显示很简单，使用map组件即可

以上便能创建地图

show-location：是否显示当前位置坐标

min-scale：限制缩放等级

2.地图添加点位

地图添加点位有两种方式。

1.直接使用markers属性

其中markers是个数组需要在data定义。

data() {
			return {
				markers:[],//点集合
                mapContext:null 
			}
		}

 加点时我们可以直接在markers中添加对象

this.markers.push({
								id:123,
								latitude:lat,
								longitude:lng,
								width:20,
								height:20,
								iconPath:"../../static/menu/recommend.png"
							})

id必须是数字

这样便可以在地图上添加一个简单的点

marker具体有什么参数，可参考官网

2.使用地图组件控制

使用这个需要先获取map上下文对象,根据id获取

this.mapContext = uni.createMapContext("map", this);

获取对象后便可以使用addMarkers进行添加点位

let marker = {
				id:123,
				latitude:lat,
				longitude:lng,
				width:20,
				height:20,
				iconPath:"../../static/menu/recommend.png"
			}
this.mapContext.addMarkers({
				markers:[marker],
				fail:()=>{
					console.log("失败了")
				}
			})

具体参数可以看这里

3.marker点击事件

需要在map组件中添加markertap点击事件。

在methods中添加markertap方法，获取点位的相关信息。

markertap(marker){
				
}

4.移动地图到指定的坐标

需要在map组件添加 longitude和latitude。

修改longitude和latitude时，地图会自动跳转到指定坐标。

5.监听地图拖拽

监听拖拽需要绑定regionchange方法

绑定后不管是地图的拖拽还是缩放都会触发改方法，但是在微信开发者工具中，只有拖拽才会触发，真机调试时缩放和拖拽都会触发。

//监听地图拖拽
regionchange(data){
	if(data.type == "end"){
					
	}
}

data.type可以判断拖拽或缩放是否结束。

监听拖拽的作用

若地图需要显示点位，且点位多的时候，一次查询全部，地图渲染会很慢，且数据量大，处理效率会很低。

这样我们可以只显示地图显示范围内的点位，使查询结果减少到屏幕可视范围内的对象，数据量减少，渲染会比较快。

如何获取屏幕的范围？

在监听地图拖拽结束后，可以使用getRegion方法获取对角的坐标，从而可以得出屏幕所显示的最大最小经纬度。

//监听地图拖拽
regionchange(data){
	if(data.type == "end"){
		this.mapContext.getRegion({
			success:(res)=>{
				// res.northeast
				// res.southwest	
			}
		})		
	}
}

mapContext便是第二节获取到的上下文对象。

若并不是显示屏幕范围，而是中心点范围。

可以使用getCenterLocation可以获取拖拽后地图的中心点位。

//监听地图拖拽
regionchange(data){
	if(data.type == "end"){
		this.mapContext.getCenterLocation({
			success: (res) => {
							
			}
		})	
	}
}