uniapp - Map地图组件属性示例

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 ~ 1label:{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:"", //多边形idpoints: 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路线轨迹回放功能（微信小程序）

实时更新中...