百度地图实现点聚合，

最新推荐文章于 2024-09-13 17:10:25 发布
皮卡皮卡qiu~
最新推荐文章于 2024-09-13 17:10:25 发布
阅读量986
点赞数
文章标签：百度 elementui vue.js
本文链接：https://blog.csdn.net/yzxzxf/article/details/122489050
版权
<template>
	<div class="home" id="home">
	  <div class="content" >
		  <div class="top">
			  <div class="top_text">
				      <div class="lists" :class="[classindex==-1?'active':'']" @click="allIn">全部</div>
					  <div class="lists" v-for="(item, index) in list" :class="[classindex==index?'active':'']" @click="color(index,item)" :key="index">{{item.resourceTypeName}}</div>
					  <div style="padding-left: 100px;"> </div>
					  <div class="checkRg" @click="seeAll">
						  <img src="../assets/image/home/all.png" alt="">
					  </div>
					  <van-popup v-model="show" position="top" :overlay="false" get-container="#home" :style="{ height: '38%' }">
						  <div class="popupTop">
							<div class="tops">
								  <div class="lf">全部类别</div>
							  <div class="rg" @click="show=false">
								  <img src="../assets/image/home/up.png" alt="">
							  </div>
							</div>
							<div class="contents">
								<div v-for="(item, index) in list" :key="index" class="iconList" @click="color(index,item)">
									<img :src="item.icon" alt="">
									<p>{{item.resourceTypeName}}</p>
								</div>
							</div>
						  </div>
					  </van-popup>
			  </div>
		  </div>
		<div id="bdmapCont" style="width: 100%; height: 100vh;">
      </div>
	  </div>
	</div>
</template>
<script>
import { getGuideList } from "../api/index.js";
export default {
	  components:{
    },
	data(){
		return{
			list:[],
			classindex:-1,
			show:false,
			mapCenter:'',
			bdmap:'',
			markerList:[]
		}
	},
	watch:{
		classindex(val){
			//   setTimeout(() => {
			// 	this.getLocation()
			// //   this.createMap()
			// }, 100)
		}
	},
	created(){
		document.title='导览'
		this.getGuideLists()
		
		    setTimeout(() => {
				this.getLocation()
    //   this.createMap()
    }, 100)
	},
	methods:{
		// 获取定位
			getLocation(){
				var _this=this
					var map = new BMap.Map("bdmapCont");
						var point = new BMap.Point(116.673574,40.398683);
						map.centerAndZoom(point,12);
						var geolocation = new BMap.Geolocation();
						geolocation.getCurrentPosition(function(r){
							if(this.getStatus() == BMAP_STATUS_SUCCESS){
								// this.mapCenter=r.point.lng+','+r.point.lat
								// alert('您的位置：'+r.point.lng+','+r.point.lat);
								var point2=new BMap.Point(r.point.lng+','+r.point.lat);
								var distance = (map.getDistance(point,point2) / 1000).toFixed(2);
								if(distance>10){
									_this.mapCenter="116.673574,40.398683"
									let oldPoint = new BMap.Point(_this.mapCenter.split(',')[0], _this.mapCenter.split(',')[1])
									map.centerAndZoom(oldPoint, 14)
									// 打点中心点
									// let marker = new BMap.Marker(oldPoint) // 创建标注
									// map.addOverlay(marker) // 将标注添加到地图中
									// map.centerAndZoom(oldPoint, 14)
								}else{
									var mk = new BMap.Marker(r.point);
									map.addOverlay(mk);
									map.panTo(r.point);
								}
							// 打点
								var markers = [];
								var pt = null;
								if(_this.classindex=='-1'){
								for (var i = 0; i < _this.list.length; i++) {
									for(var j = 0; j < _this.list[i].guideVOList.length; j++){
										var a = _this.list[i].guideVOList[j]
										pt = new BMap.Point(a.centerLongitude,a.centerDimension)
										var myIcon = new BMap.Icon(a.guideTypeIcon, new BMap.Size(41, 41), {  
										offset: new BMap.Size(20, 41), // 指定定位位置  
									});  
										myIcon.setImageSize(new BMap.Size(41, 41));//设置图片大小
										var marker=new BMap.Marker(pt,{icon:myIcon})
										markers.push(marker);
										if( a.classificationType=='2'){
										_this.addClickHandler(a, marker,map)

										}
										//  var myStyles = [{
										// 		url: EXAMPLE_URL + 'images/heart30.png',
										// 		size: new BMap.Size(30, 26),
										// 		opt_anchor: [16, 0],
										// 		textColor: '#fff',
										// 		opt_textSize: 10
										// 	}];
										var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
										//  markerClusterer.setStyles(myStyles);
                         					//添加标记点击监听
										// markers.addEventListener("click",function(e){
										// });
									}
									}
								}else{
									for(var j = 0; j < _this.markerList.length; j++){
										var a = _this.markerList[j]
										pt = new BMap.Point(_this.markerList[j].centerLongitude,_this.markerList[j].centerDimension)
										var myIcon = new BMap.Icon(_this.markerList[j].guideTypeIcon, new BMap.Size(41, 41), {  
										offset: new BMap.Size(20, 41), // 指定定位位置  
									});  
										myIcon.setImageSize(new BMap.Size(41, 41));//设置图片大小
											var marker=new BMap.Marker(pt,{icon:myIcon})
										markers.push(marker);
										if( a.classificationType=='2'){
										_this.addClickHandler(a, marker,map)

										}
										//  var myStyles = [{
										// 		url: EXAMPLE_URL + 'images/heart30.png',
										// 		size: new BMap.Size(30, 26),
										// 		opt_anchor: [16, 0],
										// 		textColor: '#fff',
										// 		opt_textSize: 10
										// 	}];
										var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
										//  markerClusterer.setStyles(myStyles);
									}
								}

							}
							else {
								alert('failed'+this.getStatus());
							}        
						},{enableHighAccuracy: true})
			},
			// marker点击事件
			addClickHandler(content,marker,map){
				var opts = {
					width : 211, // 信息窗口宽度
					height: 87, // 信息窗口高度
					// title : "111" , // 信息窗口标题
					borderRadius:22,
					enableMessage:true//设置允许信息窗发送短息
					};
				marker.addEventListener("click",function(e){
					var p = e.target;
					var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
					var infoWindow = new BMap.InfoWindow(`<div class="mapContetn" style="display: flex;justify-content: space-around;align-items: center;">
					<div class="mapLf"><img style="width: 59px;height: 58px;border-radius: 6px;" src="${content.thumbnail}" alt=""></div> 
					<div class="mapRg"><p style="font-size: 14px;font-weight: bold;margin:0;color: #111111;line-height: 22px;">${content.resourceName}</p><p style="display: -webkit-box;-webkit-box-orient: vertical;
    				-webkit-line-clamp: 2;overflow: hidden;width: 113px;height: 36px;font-size: 11px;font-weight: 500;color: #666666;line-height: 17px;margin: 0;margin-top: 6px;">${content.attractionsIntroduction}</p> <button id="markerbtn" style="height:20px;">去这里</button></div></div>`,opts); // 创建信息窗口对象 
					map.openInfoWindow(infoWindow,point); //开启信息窗口
					// marker.openInfoWindow(infoWindow)
					
					if (infoWindow.isOpen()) {
						console.log('打开了',document.getElementById("markerbtn"))
						document.getElementById("markerbtn").onclick = function (e) {
							console.log(content.centerDimension,content.centerLongitude)
							var href;
							 href="http://api.map.baidu.com/geocoder?location="+content.centerDimension+','+content.centerLongitude+"&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo"
								console.log(href)
							window.location.href=href
							}

					}else{
						infoWindow.addEventListener("open", function () {
						document.getElementById("markerbtn").onclick = function (e) {
						console.log(content.centerDimension,content.centerLongitude)
							var href;
							 href="http://api.map.baidu.com/geocoder?location="+content.centerDimension+','+content.centerLongitude+"&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo"
								console.log(href)
							window.location.href=href
							
						}
			})
					}
				});
			},
		getGuideLists(){
			getGuideList().then((res) => {
			if (res.code == 0) {
				this.list=res.data
			} else {
				this.$toast(res.msg);
			}
			});

		},
		color(e,item){
			this.classindex=e
			this.show=false
			this.markerList=item.guideVOList
			 setTimeout(() => {
				this.getLocation()
			//   this.createMap()
			}, 100)
		},
		// 查看全部图标
		seeAll(){
			this.show=true
		},
		// 全选
		allIn(){
			this.classindex=-1
			 setTimeout(() => {
				this.getLocation()
			//   this.createMap()
			}, 100)
		},
		goBaidu(content){
			console.log(111)
		}

	}
}
 function goBaidu(content){
	 console.log(content)
 }
</script>

<style lang="less" scoped>
  .top_text::-webkit-scrollbar {
				display: none;
				}
	.home{
		height: 100%;
		width: 100%;
						 .popupTop{
					 .tops{
						 display: flex;
						 justify-content: space-between;
						 align-items: center;
						 padding: 16px;
						 padding-bottom: 0;
						.lf{
							font-size: 14px;
							font-weight: 500;
							color: #333333;
							line-height: 22px;
						}
						.rg{
								width: 25px;
								height: 25px;
							img{
								width: 25px;
								height: 25px;
							}
						}
					 }
					 .contents{
						 width: 100%;
						
						.iconList{
							width: 20%;
							float: left;
							margin-top: 15px;
							img{
								height: 50px;
								width: 50px;
							}
							p{
								font-size: 13px;
								font-weight: 500;
								color: #666666;
								margin: 0;								
							}
						}
					 }
				 }
		// background: rgb(47, 231, 255);
	 .content{
		 .top{
			 height: 61px;
			 background: #FFFFFF;
			 width: 100%;
			 .top_text{
				 width: 100%;
				 height: 61px;
				padding-top: 16px;
				display: -webkit-box;
				overflow-x: scroll;
				overflow-y:hidden;
				-webkit-overflow-scrolling: touch;
				margin-right:58px ;
				 .lists{
					width: 75px;
					height: 30px;
					background: #FFFFFF;
					border: 1px solid #CCCCCC;
					border-radius: 15px;
					font-size: 13px;
					font-weight: bold;
					color: #333333;
					line-height: 30px;
					margin-left: 12px;
					flex-shrink: 0;
				 }
				 .active{
					 background: #FF8609;
					 color: #FFFFFF;
					 border: 1px solid #FF8609;

				 }
				 .checkRg{
						width: 58px;
						height: 61px;
						background: #FFFFFF;
						border-left:1px solid #eee;
						border-bottom:1px solid #eee;
						position: fixed;
						top:0;
						right: 0;
						display: flex;
						align-items: center;
						justify-content: center;
					img{
						height: 23px;
						width: 23px;
					}
				 }

			 }
		 }
	 }
	}
	// .mapContetn{
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	.mapLf{
	// 		color: red;
	// 		img{
	// 			width: 59px;
	// 			height: 58px;
	// 			border-radius: 6px
	// 		}
	// 	}
	// 	.mapRg{

	// 	}	
	// }
</style>