uni-app开发小程序时map地图使用

目录

1.地图显示

2.地图添加点位

1.直接使用markers属性

2.使用地图组件控制

3.marker点击事件

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

5.监听地图拖拽

监听拖拽的作用

---

1.地图显示

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

<map id="map" class="map"  :show-location="true" min-scale="3">

以上便能创建地图

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

min-scale：限制缩放等级

2.地图添加点位

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

1.直接使用markers属性

<map id="map" class="map"  :show-location="true" min-scale="3" :markers="markers">

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

1.  
   data() {
2.  
   return {
3.  
   markers:[],//点集合
4.  
   mapContext:null
5.  
   }
6.  
   }

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

1.  
   this.markers.push({
2.  
   id:123,
3.  
   latitude:lat,
4.  
   longitude:lng,
5.  
   width:20,
6.  
   height:20,
7.  
   iconPath:"../../static/menu/recommend.png"
8.  
   })

id必须是数字

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

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

2.使用地图组件控制

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

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

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

1.  
   let marker = {
2.  
   id:123,
3.  
   latitude:lat,
4.  
   longitude:lng,
5.  
   width:20,
6.  
   height:20,
7.  
   iconPath:"../../static/menu/recommend.png"
8.  
   }
9.  
   this.mapContext.addMarkers({
10.  
    markers:[marker],
11.  
    fail:()=>{
12.  
    console.log("失败了")
13.  
    }
14.  
    })

具体参数可以看这里

3.marker点击事件

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

1.  
   <map id="map" class="map" :show-location="true" :markers="markers"
2.  
   @markertap="markertap">

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

1.  
   markertap(marker){
2.  
    
3.  
   }

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

1.  
   <map id="map" class="map" :longitude="longitude" :latitude="latitude" :show-location="true"
2.  
   min-scale="3"
3.  
   :markers="markers"
4.  
   @markertap="markertap">

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

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

5.监听地图拖拽

1.  
   <map id="map" class="map" :longitude="longitude" :latitude="latitude" :show-location="true"
2.  
   min-scale="3"
3.  
   @regionchange="regionchange"
4.  
   :markers="markers"
5.  
   @markertap="markertap">
6.  
    
7.  
   </map>

监听拖拽需要绑定regionchange方法

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

1.  
   //监听地图拖拽
2.  
   regionchange(data){
3.  
   if(data.type == "end"){
4.  
    
5.  
   }
6.  
   }

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

监听拖拽的作用

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

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

如何获取屏幕的范围？

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

1.  
   //监听地图拖拽
2.  
   regionchange(data){
3.  
   if(data.type == "end"){
4.  
   this.mapContext.getRegion({
5.  
   success:(res)=>{
6.  
   // res.northeast
7.  
   // res.southwest
8.  
   }
9.  
   })
10.  
    }
11.  
    }

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

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

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

1.  
   //监听地图拖拽
2.  
   regionchange(data){
3.  
   if(data.type == "end"){
4.  
   this.mapContext.getCenterLocation({
5.  
   success: (res) => {
6.  
    
7.  
   }
8.  
   })
9.  
   }
10.  
    }

这篇好文章是转载于：学新通技术网