<template>
	<view class="page">
		<u-navbar is-back="false" :title="title" :border-bottom="false" :background="bgc" title-color='#000'
			title-size='36' :title-bold='true' height='45' id="navbar">
		</u-navbar>
		<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
			:show-location='true' :markers="markers"></map>


		<tab-bar :indexs='3' style=""></tab-bar>
		<span style="">福鼎蜂场</span>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " #F4FAF8",
				},
				title: "地图",
				latitude: '39.916527',
				longitude: ' 116.397128',
				isMap: false,
				zoomSize: 15,
				markers: [{
					id: 1,
					latitude: 39.90469,
					longitude: 116.40717,

					iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
					width: 39,
					height: 46,
					callout: {
						content: '福鼎蜂场福建省宁德市福鼎市太姥山镇秦屿大道二号\n', // 修改为你想要显示的文字内容
						color: '#000', // 修改为文字颜色
						fontSize: 14, // 修改为文字大小
						borderRadius: 10, // 修改为气泡圆角大小
						bgColor: '#FFFFFF', // 修改为气泡背景颜色
						padding: 10, // 修改为气泡内边距
						display: 'ALWAYS', // 修改为气泡的显示策略
						textAlign: 'center', // 设置文字对齐方式

					}
				}, {
					id: 2,
					latitude: 39.90969,
					longitude: 116.41217,
					iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
					width: 39,
					height: 46,
					callout: {
						content: '未上架', // 修改为你想要显示的文字内容
						color: '#ffffff', // 修改为文字颜色
						fontSize: 14, // 修改为文字大小
						borderRadius: 10, // 修改为气泡圆角大小
						bgColor: '#000000', // 修改为气泡背景颜色
						padding: 6, // 修改为气泡内边距
						display: 'ALWAYS', // 修改为气泡的显示策略
					}
				}],


			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFDFD;
	}

	.page {
		// position: relative;
		width: 750rpx;

		.map {
			width: 750rpx;
			height: 100vh;
		}




	}
</style>