uniapp - Map地图组件属性示例

不加糖..

已于 2022-09-20 17:55:46 修改

阅读量4.9k

点赞数 2

文章标签： uni-app 前端

于 2022-09-06 10:55:26 首次发布

本文链接：https://blog.csdn.net/qq_39891453/article/details/126720160

版权

1、markers ：点标记，用于在地图上显示标记的位置。

2、点聚合：

3、polygons ：

4、include-points：可以实现自动缩放展示视图内所有的点标记。

5、polyline ：线

map | uni-app官网

1、markers ：点标记，用于在地图上显示标记的位置。

解决自定义点标记图标不展示问题：微信小程序中点标记图标（iconPath）引用本地图标，则无法显示自定义图标，会展示系统默认点标记图。想显示自定义图标则需要使用外链地址图标，可将图标部署服务器，使用图标外链地址。

属性，代码示例：

<template>
	<view>
        <map id="map" :markers="markers" style="height: 100vh; width:100%;" :latitude="latitude" :longitude="longitude" ></map>
    </view>
</template>
<script>
export default {
    data() {
      return {
        latitude: "",
        longitude: "",
        markers:[],
      }
    },
    mounted() {

    },
    methods: {
        //uniapp中map为例：
        getPolygons(){
            //点标记
            let marker= {
	            id: 1,//标记点id,Number类型，必填
	            latitude: '',//纬度，必填
	            longitude:'',//经度，必填
	            title:'',//标注点名
	            width:24,//标注图标宽度，Number类型
	            height:32,//标注图标高度，Number类型
                iconPath:'',//显示的图标，必填
	            // rotate:0,//旋转角度,顺时针旋转的角度，范围 0 ~ 360，默认为 0
	            // alpha:1,//标注的透明度,默认1，无透明，范围 0 ~ 1
	            label:{
		            content:'',
		            color:"#ffffff",//文本颜色
		            fontSize:12,//文字大小
		            // borderWidth:30,//边框宽度
		            // borderColor:'',//边框颜色
		            // borderRadius:3,//边框圆角
		            // bgColor:"#31c27c",//背景色
		            padding:3,//文本边缘留白
		            textAlign:"center",//文本对齐方式。有效值: left, right, center
	            },//为标记点旁边增加标签
	            // anchor:{},//经纬度在标注图标的锚点，默认底边中点,{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
	            //clusterId:1,//自定义点聚合簇效果时使用
	            // customCallout:{},//自定义气泡窗口
	            // aria-label:'',//无障碍访问，（属性）元素的额外描述
	            joinCluster:false,//是否参与点聚合,此选项值必须设置为true,才会生效
	            callout:{//自定义标记点上方的气泡窗口
		            content: '',//文本
		            color:"#ffffff",//文本颜色
		            fontSize:12,//文字大小
		            borderRadius:3,//callout边框圆角
		            borderWidth:30,//边框宽度
		            borderColor:'',//边框颜色
		            bgColor:"#31c27c",//背景色
		            padding:3,//文本边缘留白
		            display:"ALWAYS",//'BYCLICK':点击显示; 'ALWAYS':常显
		            textAlign:"center",//文本对齐方式。有效值: left, right, center
                },
                info:item,//自定义属性塞点信息
            };
            
            this.markers.push(marker);
        }
    }
}
</script>

2、点聚合：

App-nvue 3.1.0+、微信小程序使用joinCluster属性设为true
使用流程如下：

MapContext.initMarkerCluster 对聚合点进行初始化配置（可选）； MapContext.addMarkers 指定参与聚合的 marker； MapContext.on('markerClusterCreate', callback) 触发时，通过 MapContext.addMarkers 更新聚合簇的样式（可选）； MapContext.removeMarkers 移除参与聚合的 marker；

3、polygons ：

指定一系列坐标点，根据 points 坐标数据生成闭合多边形，可绘制图层，通过接口获取图层边界的所有点，由点生成polygons多边形面。会存在点过多地图卡顿的问题。解决卡顿可参考：Map创建自定义图片图层，图片会随着地图缩放而缩放，1、uniapp

属性：[{
        id:"", //多边形id
        points: points, // 必须四个及以上的坐标点
        fillColor: '#EA332333', //填充颜色，=> 常见颜色值透明度明确标识需要8位16进制颜色代码,可通过颜色值设置透明度
        strokeColor: '#EA3323',//描边的颜色
        strokeWidth: 2, //描边宽度
        zIndex: 1 //层级
}]

示例代码：

<template>
	<view>
        <map id="map" :polygons="polygons" style="height: 100vh; width:100%;" :latitude="latitude" :longitude="longitude" ></map>
    </view>
</template>
<script>
export default {
    data() {
      return {
        latitude: "",
        longitude: "",
        polygons:[],
      }
    },
    mounted() {
        this.getPolygons();
    },
    methods: {
        //uniapp中map为例：
        getPolygons(){
            //边界点
            let points = [
                {
			        longitude: "",
			        latitude: ""
		        },
                {
			        longitude: "",
			        latitude: ""
		        },
                ...
            ];
            let arr = {
 	            id:"", //多边形id
	            points: points, // 必须四个及以上的坐标点
	            fillColor: '#33EA3323', //填充颜色，明确标识需要8位16进制颜色代码,可通过颜色值设置透明度
	            strokeColor: '#EA3323',//描边的颜色
	            strokeWidth: 2, //描边宽度
	            zIndex: 1 //层级
            };
            this.polygons.push(arr);
        }
    }
}
</script>

4、include-points：可以实现自动缩放展示视图内所有的点标记。

<template>
	<view>
        <map id="map" :include-points="includePoints" style="height: 100vh; width:100%;" :latitude="latitude" :longitude="longitude" ></map>
    </view>
</template>
<script>
export default {
    data() {
      return {
        latitude: "",
        longitude: "",
        includePoints:[],
      }
    },
    mounted() {
        this.getIncludePoints();
    },
    methods: {
        //uniapp中map为例：
        getIncludePoints(){
            //边界点
            let points = [
                {
			        longitude: "",
			        latitude: ""
		        },
                {
			        longitude: "",
			        latitude: ""
		        },
                ...
            ];
            this.includePoints.concat(points);
        }
    }
}
</script>

5、polyline ：线

指定一系列坐标点，从数组第一项连线至最后一项。

属性：[{
        points: arr,//经纬度数组
        color: '#0000FF',//线的颜色
        width: 10,//线的宽度
        borderWidth: 2, //线的厚度
        arrowLine: true, //带箭头的线
        //colorList:[],//彩虹线
        //borderColor:'',//线的边框颜色
        //arrowIconPath:'',//更换箭头图标,在arrowLine为true时生效
        //dottedLine:'',//是否虚线,默认false
}]

代码示例可查看 =》uni-app map路线轨迹回放功能（微信小程序）

实时更新中...