租房小程序使用uniapp展示地图map-Toy模板网

这篇具有很好参考价值的文章主要介绍了租房小程序使用uniapp展示地图map。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

开源字节的租房小程序一个关于房屋租赁类的APP，用的uni-app实现，这种app少不了的就是经纪人，位置信息。我们的代码开源免费，欢迎交流使用。

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

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>