开源字节的租房小程序一个关于房屋租赁类的APP，用的uni-app实现 ，这种app少不了的就是经纪人，位置信息。我们的代码开源免费，欢迎交流使用。
map地图组件使用时直接在template中使用<map></map>标签，标签中可嵌套map属性
map最常用到的属性：
????longitude? 中心经度
????latitude 中心纬度
????scale 缩放级别（取值范围为5-18,默认的是16 ，值数越大，放大程度越大，看的越细）
????markers? 标记点? （类型为Array数组，在地图上标记出来的点）
? ??polyline（类型为Array数组，没有默认值，表示路线，数组上的所有点连成线）
????circles（类型Array数组，表示圆）
????controls（类型Array数组，表示控件）
????include-points（类型Array数组，表示缩放视野已包含所有给定的坐标点）
????show-compass（类型为Boolean，默认值为false，表示为是否显示指南针）
????enable-overlooking（类型为Boolean，默认值为false，表示为是否开启俯视）
????enable-satellite（类型为Boolean，默认值为false，表示为是否开启卫星图）
????enable-traffic（类型为Boolean，默认值为false，表示为是否开启实时路况）
????show-location（类型为Boolean，表示显示带有方向的当前定位点）
????polygons（类型Array，表示为多边形）
markers的属性有（表示标记点用于在地图上显示标记的位置）
? ??id：标记点id(marker点击事件回调会返回此id)
????latitude：纬度（范围 -90 ~ 90 ）
????longitude：经度（范围 -180 ~ 180 ）
????title：标注点名
????iconPath：显示的图标
????rotate：旋转角度（顺时针旋转的角度，范围 0 ~ 360，默认为 0 ）
????alpha：标注的透明度（ 默认1，无透明，范围 0 ~ 1）
????width：标注图标宽度（默认为图片实际宽度 ）
????height：标注图标高度（默认为图片实际高度 ）
????callout：自定义标记点上方的气泡窗口
????label：为标记点旁边增加标签
????anchor：经纬度在标注图标的锚点
? ? ?callout的属性有
? ??????????content：文本
????????????color：文本颜色
????????????fontSize：文字大小
????????????borderRadius：callout边框圆角
????????????bgColor：背景色
????????????padding：文本边缘留白
????????????display：BYCLICK':点击显示;'ALWAYS':常显
????????????textAlign：文本对齐方式
? ??label的属性有
? ??????????content：文本??
????????????color：文本颜色
????????????fontSize：文字大小
????????????x：label的坐标，原点是 marker 对应的经纬度
????????????y：label的坐标，原点是 marker 对应的经纬度
????????????borderWidth：边框宽度
????????????borderColor：边框颜色
????????????borderRadius：callout边框圆角
????????????bgColor：背景色
????????????padding：文本边缘留白
????????????textAlign：文本对齐方式
polyline的属性有（表示指定一系列坐标点，从数组第一项连线至最后一项）
????points，经纬度数组，类型为Array，必填，如：[{latitude: 0, longitude: 0}]
????color，线的颜色，类型为String，不必填，如：#0000AA
????width，线的宽度，类型为Number，不必填
????dottedLine，是否虚线，类型为Boolean，不必填，默认值false
????arrowLine，带箭头的线，类型为Boolean，不必填，默认值为false
????arrowIconPath，更换箭头图标，类型为String，不必填，在arrowLine为true时，默认带箭头的线时生效
????borderColor，线的边框颜色，类型为String，不必填
????borderWidth，线的厚度，类型为Number，不必填
circles 的属性有（在地图上显示圆）
????latitude，纬度，Number，必填，浮点数，范围 -90 ~ 90
????longitude，经度，Number，必填，浮点数，范围-180 ~ 180
????color，描边的颜色，String，不必填，如：#0000AA
????fillColor，填充颜色，String，不必填，如：#0000AA
????radius，半径，Number，必填
????strokeWidth，描边的宽度，Number，不必填
controls 控件 (在地图上显示一个控件，但是这个控件并不随着地图移动)
????id：控件id(在控件点击事件回调会返回此id)
????position：控件在地图的位置(控件相对地图位置)
????iconPath：显示的图标(项目目录下的图片路径)
????clickable：是否可点击(默认不可点击)
附上代码
<template>
<view>
<view>
<map :latitude="latitude" :longitude="longitude"
:markers="covers"
@click="clickMap">
</map>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'map',
name: '杭州市',
address: '杭州市拱墅区万达广场',
latitude: 30.31968,
longitude: 120.14209,
covers: [{
latitude: 30.31968,
longitude: 120.14209,
iconPath: '../../../static/location.png',
}]
}
},
methods:{
clickMap(e){
console.log(e);
uni.openLocation({
longitude: Number(this.longitude),
latitude: Number(this.latitude),
name: this.name,
address: this.address
})
},
}
}
</script>
<style>
map {
width: 100%;
height: 450rpx;
}
</style>如若转载，请注明出处：开源字节 ? https://sourcebyte.cn/article/247.html