PHP百度地图多点聚合问题

最新推荐文章于 2021-04-05 09:58:52 发布

木子李0531

最新推荐文章于 2021-04-05 09:58:52 发布

阅读量383

点赞数

分类专栏：百度地图 php 多点聚合

本文链接：https://blog.csdn.net/lfbin5566/article/details/105677955

版权

php 同时被 3 个专栏收录

49 篇文章 1 订阅

订阅专栏

百度地图

3 篇文章 0 订阅

订阅专栏

多点聚合

1 篇文章 0 订阅

订阅专栏

PHP部分

public function point(){
		//获取IP值
		$ip = $_SERVER["REMOTE_ADDR"];
		//根据IP获取中心点坐标，api可以百度申请（免费的）
		$content = file_get_contents("http://api.map.baidu.com/location/ip?ip=$ip&ak=您的密钥&coor=bd09ll"); 
		$json = json_decode($content);
		//提取经纬度
		$lng = $json->{'content'}->{'point'}->{'x'};//提取经度数据
		$lat = $json->{'content'}->{'point'}->{'y'};//提取纬度数据
		//此处模拟坐标点信息，和点位点击窗口信息
		$points = [];
		$name = ['赵','钱','孙','李','周','吴','郑','王'];
		for($i=0;$i<200;$i++){
			$numg = rand(1,10000)/10000>0.5 ? -(rand(1,10000)/10000) : (rand(1,10000)/10000);
			$numt = rand(1,10000)/10000>0.5 ? -(rand(1,10000)/10000) : (rand(1,10000)/10000);
			$num = rand(0,1);
			$lng1 = sprintf("%.4f",($lng +$numg));
			$lat1 = sprintf("%.4f",($lat +$numt));
			$arr = [
                    'lng' => $lng1,
                    'lat' => $lat1,
                    'state' => $num,
                    "address" => "姓名：".$name[array_rand($name)],
                    "sex" => "性别:男",
                    "like" => "爱好：乒乓球"
                   ];
			array_push($points,$arr);
		}
		$this->assign('points',json_encode($points));
		$this->assign('lng',$lng);
		$this->assign('lat',$lat);
		return $this->fetch('point');
	}

HTML部分

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
		#r-result{height:100%;width:20%;float:left;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
	<title>点位</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
   // 百度地图API功能
   var map = new BMap.Map("allmap");
	//鼠标可以放大
   	map.enableScrollWheelZoom(true);
	
	// 编写自定义函数,创建标注
	var point = new BMap.Point({$lng}, {$lat});
	map.centerAndZoom(point, 11);
	//设置icon，当前的定位，添加marker
	var myIcon = new BMap.Icon("http://api.azcity.cn/public/image/localtion.png", new BMap.Size(25,25));
	var marker = new BMap.Marker(point,{icon:myIcon});
	map.addOverlay(marker);
	
	// 随机向地图添加标注
	var opts = {
				width : 250,     // 信息窗口宽度
				height: 80,     // 信息窗口高度
				title : "" , // 信息窗口标题
				enableMessage:true//设置允许信息窗发送短息
			   };
	//从后台获取的点位信息
	var points = {$points};
	var len = points.length;
	var pt;
	var myIcon;
	var marker2;
	var content;
	var markers= [];
	//添加多个个marker信息
	for (var i = 0; i < len; i++) {
		pt = new BMap.Point(points[i]['lng'],points[i]['lat']);
		if(points[i]['state'] == 0){
			myIcon = new BMap.Icon("http://api.azcity.cn/public/image/error.png", new BMap.Size(25,25));
		}else{
			myIcon = new BMap.Icon("http://api.azcity.cn/public/image/success.png", new BMap.Size(25,25));
		}
		marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
		//设置窗口信息
		content = points[i]['address']+'<br/>'+points[i]['sex']+'<br/>'+points[i]['like'];
		map.addOverlay(marker2);
		addClickHandler(content,marker2);
		markers.push(marker2);
	}
	//添加点聚合信息
	var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
	//点击事件
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
</script>

效果图