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

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

map地图组件使用时直接在template中使用标签，标签中可嵌套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