微信小程序 地图功能的实现 map

这次项目有个功能是地图以选项卡方式可以选择进行不同位置展示实现方法就是将地图和tab选项卡结合选项卡刚开始我套了之前的滑动选项卡,套完发现一个问题之前写的那套选项卡是用的swiper写的还用了循环这样会导致一个结果,就是地图被循环生成了如果使用一个地图性能会更佳,于是果断舍弃swiper互动切换swiper滑动切换适合每页有不同内容的,对于这种在一张地图不同经纬度的展示,这种情况是不适合的

好了,总结完进入正题地图功能的实现:

wxml部分地图标签

//scale:地图显示等级,longitude,latitude:中心点经纬度,markers:标记点<view catchtap="swipclick" class="useroneout"><map name="mymap" class="mymap" longitude="{{centerlng}}" latitude="{{centerlat}}" scale="11" markers="{{markers}}"></map></view>

地图属性具体可以参考官方文档:地图属性

wxss

.mymap{width: 100%;height: 100%;}

js

写了一个函数用来切换map里面的标记点

// 获取地图景点坐标coordinates:function(id,index){//id:tab选项卡的id后台请求会得到一组选项卡信息带有id和选项卡内容var that=this;// 获取坐标点wx.request({url: 'https://lujing/map',//后台路径method:'POST',data:{scienceid:that.data.scienceid,tabid:id},success(res){// 获取坐标图标var cardarr=that.data.mapcarlist;//后台返回的标记点数据var img='';//标记点图标for(let i=0;i<cardarr.length;i++){if(cardarr[i].id==id){img=cardarr[i].minimg;}}// 整理marker数据var arr;//该tab坐标listvar newarr=[];//新数据if(index==0){//当选项卡在第一项时arr=res.data.data;for (let i = 0; i < arr.length; i++) {//将标记点的信息插入新数组newarr.push({id:arr[i].id,latitude:arr[i].lat,longitude:arr[i].lng,iconPath:img,width:'30px',height:'30px',callout:{content:arr[i].name+'\n'+'人数:'+arr[i].num,padding:5,borderRadius:5}})}}else{//当选项卡在其他项时arr=res.data.tab;for (let i = 0; i < arr.length; i++) {//将标记点的信息插入新数组newarr.push({id:arr[i].id,latitude:arr[i].lat,longitude:arr[i].lng,iconPath:img,width:'30px',height:'30px',callout:{content:arr[i].name+'\n'+'人数:'+arr[i].tabid,padding:5,borderRadius:5}})}}console.log(arr);console.log(newarr);that.setData({potllist:newarr,//标记点centerlat:newarr[0].latitude,//地图中心点centerlng:newarr[0].longitude,//地图中心点cardimage:img,//标记点图标markers:newarr//标记点})}})},

这里mark选用的callout,有其他需求的伙伴也可以选择自定义气泡~