微信小程序原生使用map组件实现轨迹、多边形-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序原生使用map组件实现轨迹、多边形。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用地图本身的map组件实现地图

初始化地图：

<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" bindtap='handlerMap' enable-satellite="{{satellite}}" scale="{{scale}}" circles="{{circles}}" markers="{{markerData}}" polyline="{{polyline}}" polygons="{{polygons}}" enable-zoom="{{true}}" rotate="{{0}}" show-compass="{{true}}" />

map组件的属性

longitude	必须	Number	中心点经度
latitude	必须	Number	中心点纬度
scale	选填	Number	地图的缩放级别（缩放切换时使用）
include-points	选填	Array.	缩放视野以展示所有坐标点
markers	选填	Array.	地图展示的坐标点集合
polyline	选填	Array.	地图展示的线路集合
circles	选填	Array.	地图展示的圆的集合
polygons	选填	Array.	地图展示的多边形的集合
rotate	选填	Number（0-360）	地图旋转的角度
show-compass	选填	true/false	展示指南针
enable-zoom	选填	true/false	缩放（默认true）
enable-scroll	选填	true/false	拖动（默认true）
enable-satellite	选填	true/false	是否开启卫星地图（切换地图图层使用）
bindtap	选填	eventhandle	点击地图触发的事件
bindmarkertap	选填	eventhandle	点击坐标点触发

以上是map组件的部分属性，我在开发过程中用到的一部分以及我觉得可能会用到的。

如果只是简单的展示地图，只需要两个参数即可：

<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" /> Page({ data:{ longitude:116.39479288997632, latitude:40.0772127801174, } })

需要什么功能我们往里边添加即可

添加缩放控件：scale 有两个属性：min-scale最小缩放（默认3）、max-scale最大缩放（默认20）

<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}"/> <view bindtap='handBScale'> <img src="../../imgs/jia.png" /> 
</view> <view bindtap='handSScale'>
 <img src="../../imgs/jian.png" /> 
</view> 
Page({
 data:{ 
 longitude:116.39479288997632,
 latitude:40.0772127801174,
 scale：10,
 },
 handBScale(){ 
let scale=this.data.scale
 scale++
 if(scale>20)scale=20 //当scale突破20之后，虽然地图并没有继续放大，但是绑定的值是在增大的，如果不管当你缩小的时候，会出现失效的情况
 this.setData({ scale:scale }) 
},
 handBScale(){
 let scale=this.data.scale
 scale--
 if(scale<3)scale=3//同放大
 this.setData({ scale:scale }) 
} 
})

ok，这样就完成了一个缩放的功能，因为微信的map组件没有自带的缩放控件，所以需要自己单独写一个。当然我相信样式对各位是小意思，所以我就不写了。QAQ

接下来是点线面的实现，因为地图并没有点击滑动划线的方法（我没找到）。点线面都是由点击实现，这样的话点线面是连贯实现。

<map id='map' longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}"
              markers="{{markers}}" polyline="{{polyline}}" polygons="{{polygons}}"
              bindtap="handTap"
/> 
<view class="body-view">
        <slider bindchange="slider3change" min="200" max="30200" value="200" show-value/>
</view>
Page({
    data:{
        longitude:116.39479288997632,
        latitude:40.0772127801174,    
        scale：10,
        marker:null,//改变圆半径时圆心的坐标点
        markers:[],
        polyline:[],
        polygons:[],
        markerId:1
    },
    handTap(event){
        let lnglat=event.detail
        let marker = this.generateMarker(lnglat)
        let markers=this.data.markers
        markers.push(marker)  //push是不断给地图添加坐标点，如果只需要一个，直接赋值即可
        this.setData({
            marker:marker,
            markers:markers
        })
        let circle=this.generateCircle(marker,200)
        
let circles=[]
    circles.push(circle)
        this.setData({
        longitude:marker.longitude, //画圆时需要把圆心定为地图的中心，不画圆可以不要
                latitude:marker.latitude
        scale:16,
        circles:circles
        })
        if(markers.length>1){
            let polyline=this.generatePolyline(markers)      
            let polylines=[]
            polylines.push(polyline)
            this.setData({
                polyline:polylines
            })
        }
        if(markers.length>2){
            let polygon=this.generatePolygon(markers)      
            let polygons=[]
            polygons.push(polygon)
            this.setData({
                polygons:polygons
            })
        }
    },
    slider3change(event){
     let value=event.detail.value
     let marker=this.data.marker
         if(marker==null)return
     let circle=this.generateCircle(marker,value)
     let circles=[]
     let scale=0
     if(value<500){
        scale=16
     }else if(value<1000){
        scale=14
     }else if(value<5000){
        scale=12
     }else if(value<10000){
        scale=10
     }else if(value<35000){
        scale=9
     }else{
        scale=12
     }
         circles.push(circle)
     this.setData({
        circles:circles,
        scale:scale
     })
    },
    generateMarker(data){  //创建坐标点的函数
        let longitude=data.longitude||data.lng
        let latitude=data.latitude||data.lat
        let markerId=this.data.markerId
        let iconPath="../../imgs/dian.png"  
        let marker={
            longitude:longitude,   //必填经度
            latitude:latitude,     //必填纬度
            iconPath:iconPath,     //必填图标路径
            markerId:markerId,     //选填点位id，id作为唯一的标识符，我觉得填上会好点，可以不填。
            width:20,              //图片的宽度，默认为实际宽度
            height:20,             //图片的高度，默认为实际高度
            anchor:{               //图标的中心点（0-1选值）
                x:.5,
                y:.5                 
            }
        }    
        this.setData({
            markerId:markerId++     //每次生成坐标点给这个值加1，保证点位内的id唯一性        
        })
        return marker   
    },
    generatePolyline(data=[]){  //创建线条
        let polyline={}
        let points=[]
        for(let ite of data){
            points.push({
                longitude:ite.longitude,
                latitude:ite.latitude            
            })   
        }
        polyline={
            points:points,            //坐标点集合
            color:"#333333",          //线条的颜色
            colorList:[],             //彩虹线，使用时会忽略color的值
            width:5,                  //线条的宽度
            dottedLine:true,          //是否虚线
            //arrowLine:false,          //是否有箭头
            //arrowIconPath:'',         //箭头更换时的图标地址，arrline为true时生效
            //borderColor:'blue',       //线条边框的颜色
            //borderWidth:3,            //线条边框的宽度
            abovelabels:'abovelabels'   //压盖层级：('aboveroads':道路之上楼块之下，'abovebuildings':楼块之上POI之下，'abovelabels':所有的POI之上，默认是这个)    
        }
        return polyline
    },
    generatePolygon(data){   //创建多边形
        let polygon={}
        let points=[]
        for(let ite of data){
            points.push({
                longitude:ite.longitude,
                latitude:ite.latitude              
            })      
        }
        polygon={
            points:points,              //坐标点集合  
            dashArray:[10,10],          //描边线默认为实线，如果需要虚线使用这个属性，接收两个值的数组，分别是实线和虚线的长度
            strokeWidth:4,              //描边的宽度
            strokeColor:"#555555",      //描边的颜色,只接受16进制和RGBA格式
            fillColor:"rgba(152,132,152,.5)",       //多边形围绕成的空间的填充色
            zindex:4,                   //多边形z轴数值
            level:'abovelabels'         //压盖层级
        }
        return polygon
    },
    generateCircle(marker,radius){      //创建圆
       let circle={
            longitude:marker.longitude, //圆中心坐标点的经度
            latitude:marker.latitude,   //圆中心坐标点的纬度
            radius:radius,              //圆的半径
            color:'#555555',            //描边颜色
            fillColor:'#666666',        //填充颜色
            strokeWidth:3,              //描边宽度
            level:'abovelabels'         //压盖层级
       }
        return circle
    }
})

以上就是点、线、面的实现。文章来源地址https://www.toymoban.com/news/detail-770727.html

到了这里，关于微信小程序原生使用map组件实现轨迹、多边形的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！