<template>
	<view :style="{'height':windowHeight}" class="flex flex-column">
		<!--头部-->
		<navbarNew :headerIndex="999" headerBG="#fff" :customHeader="true" :bounding="true">
			<view slot="xHeader" class="flex flex-center flex-vcenter" style="padding: 0 8rpx;">
				<view class="menu flex flex-between flex-vcenter flex-1">
					<view class="flex-1 flex flex-vcenter flex-center f-s-32">聚合点</view>
				</view>
			</view>
		</navbarNew>
		<view class="mapBox flex-1 flex ">
			<view id='mapContainer' class="flex-1" :style="{'height':mapHeight}"></view>
		</view>
	</view>
</template>
<script>
	var map;
	import navbarNew from "@/components/navbarNew.vue";
	export default {
		components: {
			navbarNew
		},
		data() {
			return {
				searchValue: '',
				latitude: 25.03,
				longitude: 102.73,
				parkList: [{
						latitude: 25.1323,
						longitude: 102.8834,
						name: '野鸭湖农家乐',
						id: 1
					},
					{
						latitude: 25.1373,
						longitude: 102.8884,
						name: '绿水古木农家乐',
						id: 2
					}, {
						latitude: 25.1673,
						longitude: 102.8884,
						name: '天宝牧海农家乐',
						id: 3
					}
				],
				zoom: 12,
				windowHeight: '',
				mapHeight: '',
				markIcon: '../../static/images/addressIcon.png'
			}
		},
		onLoad() {
			this.loadScript()
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.screenHeight + "px";
					this.mapHeight = (res.screenHeight - 100) + 'px'
				}
			})
		},
		methods: {
			//动态创建的<script>标签用来引入cdn文件
			loadScript() {
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.src =
					"https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.MarkerCluster"
				script.onload = script.onreadystatechange = () => {
					if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
						this.init();
						script.onload = script.onreadystatechange = null;
					}
				};


				// document.body.appendChild(script);
				document.head.appendChild(script);
			},

			init() {
				let that = this
				var map = new AMap.Map("mapContainer", {
					zoom: that.zoom,
					center: [that.longitude, that.latitude],
					resizeEnable: true
				});

				var markers = [];
				that.parkList.map((item) => {
					markers.push({
						weight: item.weight,
						lnglat: [item.longitude, item.latitude],
						extData: {
							id: item.id,
							// icon: url,
							name: item.name,
							markerIcon: that.markIcon
						}
					})
				})
				var count = that.parkList.length;
				var bgColor = '43,140,190';
				var _renderClusterMarker = function(context) {

					div.style.backgroundColor = 'rgba(' + bgColor + ',.5)';
					var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 40);
					div.style.width = div.style.height = size + 'px';
					div.style.border = 'solid 1px rgba(' + bgColor + ',1)';
					div.style.borderRadius = size / 2 + 'px';
					div.innerHTML = context.count;
					div.style.lineHeight = size + 'px';
					div.style.color = '#ffffff';
					div.style.fontSize = '12px';
					div.style.textAlign = 'center';
					context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
					context.marker.setContent(div);
				};
				var _renderClusterMarker = function(context) {
					// 聚合中点个数
					var clusterCount = context.count;
					var div = document.createElement('div');
					// 聚合点配色

					bgColor = '195,33,29';
					div.style.backgroundColor = 'rgba(' + bgColor + ',.5)';
					var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 10);
					div.style.width = div.style.height = size + 'px';
					div.style.border = 'solid 1px rgba(' + bgColor + ',1)';
					div.style.borderRadius = size / 2 + 'px';
					div.innerHTML = context.count;
					div.style.lineHeight = size + 'px';
					div.style.color = '#ffffff';
					div.style.fontSize = '12px';
					div.style.textAlign = 'center';
					context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
					context.marker.setContent(div);
				};
				var markIcon = new AMap.Icon({
					// 图标尺寸
					image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
					// 图标所用图片大小
					imageSize: new AMap.Size(20, 32),
				});
				var _renderMarker = function(context) {
					let data = context.data[0].extData
					 context.marker.setIcon(markIcon); // 设置聚合点图标
					context.marker.setLabel({
						direction: 'right',
						offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
						content: "<div  style='box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);padding: 4px 6px;display: flex;align-items: center;'> <span class='info_right'>" +
							data.name +
							"    " +
							"</span><img style='width: 20px;' src='https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png'>" +
							"<img/></div>", //设置文本标注内容
					});
					context.marker.on('click', function() {
						// console.log(data) 跳转页面
						that.navigateTo('/pages/shop/packageList?id='+data.id)
					})
				}
				var cluster = new AMap.MarkerCluster(map, markers, {
					gridSize: 60, // 聚合网格像素大小
					renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
					renderMarker: _renderMarker, // 自定义非聚合点样式
				});

			},
			navigateTo(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			
		}
	}
</script>
<style>
	.amap-marker-label .info {
		border: 1px solid #ccc !important;
	}
</style>
<style lang="scss" scoped>
	.menu {
		line-height: 40px;
	}

	.inputBox {
		width: 730rpx;
		box-sizing: border-box;
		height: 70rpx;
		// background: red;
		border-radius: 18rpx;
		border: 1rpx solid #BBBBBB;
		padding: 10rpx 10rpx 0 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.fixedTop {
		background: #fff;
	}

	.mapBox {
		width: 750rpx;
	}

	.customCallout {
		box-sizing: border-box;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 30px;
		width: 150px;
		height: 40px;
		display: inline-flex;
		padding: 5px 20px;
		justify-content: center;
		align-items: center;
	}

	.content {
		flex: 0 1 auto;
		margin: 0 10px;
		font-size: 14px;
	}
</style>