租房小程序使用 uniapp 展示地图 map

开源字节的租房小程序一个关于房屋租赁类的 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