開源字節(jié)的租房小程序一個關(guān)于房屋租賃類的APP，用的uni-app實現(xiàn) ，這種app少不了的就是經(jīng)紀(jì)人，位置信息。我們的代碼開源免費，歡迎交流使用。

map地圖組件使用時直接在template中使用<map></map>標(biāo)簽，標(biāo)簽中可嵌套map屬性

map最常用到的屬性：

????longitude? 中心經(jīng)度

????latitude 中心緯度

????scale 縮放級別（取值范圍為5-18,默認(rèn)的是16 ，值數(shù)越大，放大程度越大，看的越細(xì)）

????markers? 標(biāo)記點? （類型為Array數(shù)組，在地圖上標(biāo)記出來的點）

? ??polyline（類型為Array數(shù)組，沒有默認(rèn)值，表示路線，數(shù)組上的所有點連成線）

????circles（類型Array數(shù)組，表示圓）

????controls（類型Array數(shù)組，表示控件）

????include-points（類型Array數(shù)組，表示縮放視野已包含所有給定的坐標(biāo)點）

????show-compass（類型為Boolean，默認(rèn)值為false，表示為是否顯示指南針）

????enable-overlooking（類型為Boolean，默認(rèn)值為false，表示為是否開啟俯視）

????enable-satellite（類型為Boolean，默認(rèn)值為false，表示為是否開啟衛(wèi)星圖）

????enable-traffic（類型為Boolean，默認(rèn)值為false，表示為是否開啟實時路況）

????show-location（類型為Boolean，表示顯示帶有方向的當(dāng)前定位點）

????polygons（類型Array，表示為多邊形）

markers的屬性有（表示標(biāo)記點用于在地圖上顯示標(biāo)記的位置）

? ??id：標(biāo)記點id(marker點擊事件回調(diào)會返回此id)

????latitude：緯度（范圍 -90 ~ 90 ）

????longitude：經(jīng)度（范圍 -180 ~ 180 ）

????title：標(biāo)注點名

????iconPath：顯示的圖標(biāo)

????rotate：旋轉(zhuǎn)角度（順時針旋轉(zhuǎn)的角度，范圍 0 ~ 360，默認(rèn)為 0 ）

????alpha：標(biāo)注的透明度（ 默認(rèn)1，無透明，范圍 0 ~ 1）

????width：標(biāo)注圖標(biāo)寬度（默認(rèn)為圖片實際寬度 ）

????height：標(biāo)注圖標(biāo)高度（默認(rèn)為圖片實際高度 ）

????callout：自定義標(biāo)記點上方的氣泡窗口

????label：為標(biāo)記點旁邊增加標(biāo)簽

????anchor：經(jīng)緯度在標(biāo)注圖標(biāo)的錨點

? ? ?callout的屬性有

? ??????????content：文本

????????????color：文本顏色

????????????fontSize：文字大小

????????????borderRadius：callout邊框圓角

????????????bgColor：背景色

????????????padding：文本邊緣留白

????????????display：BYCLICK':點擊顯示;'ALWAYS':常顯

????????????textAlign：文本對齊方式

? ??label的屬性有

? ??????????content：文本??

????????????color：文本顏色

????????????fontSize：文字大小

????????????x：label的坐標(biāo)，原點是 marker 對應(yīng)的經(jīng)緯度

????????????y：label的坐標(biāo)，原點是 marker 對應(yīng)的經(jīng)緯度

????????????borderWidth：邊框?qū)挾?/p>

????????????borderColor：邊框顏色

????????????borderRadius：callout邊框圓角

????????????bgColor：背景色

????????????padding：文本邊緣留白

????????????textAlign：文本對齊方式

polyline的屬性有（表示指定一系列坐標(biāo)點，從數(shù)組第一項連線至最后一項）

????points，經(jīng)緯度數(shù)組，類型為Array，必填，如：[{latitude: 0, longitude: 0}]

????color，線的顏色，類型為String，不必填，如：#0000AA

????width，線的寬度，類型為Number，不必填

????dottedLine，是否虛線，類型為Boolean，不必填，默認(rèn)值false

????arrowLine，帶箭頭的線，類型為Boolean，不必填，默認(rèn)值為false

????arrowIconPath，更換箭頭圖標(biāo)，類型為String，不必填，在arrowLine為true時，默認(rèn)帶箭頭的線時生效

????borderColor，線的邊框顏色，類型為String，不必填

????borderWidth，線的厚度，類型為Number，不必填

circles 的屬性有（在地圖上顯示圓）

????latitude，緯度，Number，必填，浮點數(shù)，范圍 -90 ~ 90

????longitude，經(jīng)度，Number，必填，浮點數(shù)，范圍-180 ~ 180

????color，描邊的顏色，String，不必填，如：#0000AA

????fillColor，填充顏色，String，不必填，如：#0000AA

????radius，半徑，Number，必填

????strokeWidth，描邊的寬度，Number，不必填

controls 控件 (在地圖上顯示一個控件，但是這個控件并不隨著地圖移動)

????id：控件id(在控件點擊事件回調(diào)會返回此id)

????position：控件在地圖的位置(控件相對地圖位置)

????iconPath：顯示的圖標(biāo)(項目目錄下的圖片路徑)

????clickable：是否可點擊(默認(rèn)不可點擊)

附上代碼

<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: '杭州市拱墅區(qū)萬達(dá)廣場',
				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>

如若轉(zhuǎn)載，請注明出處：開源字節(jié) ? https://sourcebyte.cn/article/247.html文章來源地址http://www.zghlxwxcb.cn/news/detail-494430.html

到了這里，關(guān)于租房小程序使用uniapp展示地圖map的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！