1. 百度地圖同時載入兩個地圖 並且分別有自己的標注點
<?php@session_start();include ("conn.php"); if ($_SESSION['password'] == ''){ echo "<script>location.href='login.php';</script>";} $sql="select * from syetem";$query=mysql_query($sql);$row=mysql_fetch_array($query); if($_GET['sub'] == 'ok'){ $val = $_GET['val']; $nid = $_GET['nid']; echo $val; echo $nid; exit;} ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title>首頁 - <?php echo $row['title'] ?></title><style type="text/css"> html{height:100%; font-family:"Microsoft YaHei",} #container{height: 68%; width:93%; border:solid 1px #ddd; margin:0 auto; margin-top:15px; } #container2{height: 68%; width:93%; border:solid 1px #ddd; margin:0 auto; margin-top:15px; } #Info1{height: 68%; width:93%; border:solid 1px #ddd; margin:0 auto; margin-top:15px; } table{empty-cells:show;border-collapse:collapse;border-spacing:0;}/* tablist */.tablist{width: 100%; border:solid 1px #ddd; margin:0 auto;}.tablist td{line-height:24px; border-bottom:solid 1px #ddd; padding: 5px; text-align:center; }.tablist td h4{text-align:center; vertical-align:middle; padding-top:15px; } .BMap_cpyCtrl{ display:none; }.anchorBL{ display:none; }</style> <script type="text/javascript" src="http://api.map..com/api?v=1.3&ak="></script><link rel="stylesheet" href="http://api.map..com/library/DrawingManager/1.4/src/DrawingManager_min.css" /><link rel="stylesheet" href="css/search.css" /> <link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="box_all" style="margin-top:-35px;"> <div class="box"> <ul class="select"> <?php $k = 1; $sql3="select * from fenlei"; $query3=mysql_query($sql3); while($row3=mysql_fetch_array($query3)) { ?> <li class="select-list"> <dl id="select<?php echo $k; ?>"> <dt><?php echo $row3['title'];?>：</dt> <dd class="select-all selected"><a href="#">全部</a></dd> <?php $sql4="select * from biaoqian where tid = '".$row3['id']."'"; $query4=mysql_query($sql4); while($row4=mysql_fetch_array($query4)) { //javascript:void(0) ?> <dd><a href="javascript:void(0)" id="" onclick="queryclick('<?php echo $row4['id'];?>','<?php echo $k;?>');"><?php echo $row4['title'];?></a></dd> <?php } ?> </dl> </li> <?php $k++; } ?> <li class="select-result"> <dl> <dt>已選條件：</dt> <dd class="select-no">暫時沒有選擇過濾條件</dd> </dl> </li> </ul> </div></div><div class="boxdown" style="margin-top:-30px; "></div> <!-- 顯示隱藏 條件篩選 --><script type="text/javascript"> </script> <div id="container"></div> <div id="container2" style="display:none; "></div> <div id="left-panel" style="height: 350px; width: 430px; position: absolute; top: 50%; left:14%; display:none; "><div id="searchbox" class="clearfix"><div id="searchbox-container"><div id="sole-searchbox-content" class="searchbox-content" style="display: block;"><input class="searchbox-content-common" type="text" id="keyword" placeholder="搜地點" value="" style=" width: 368px; padding-left: 5px; "><input id="result_" type="hidden" value="寧波天一廣場" style="margin-right:100px;"/></div></div><input type="submit" id="search_button" onclick="searchByStationName();" value=""/></div></div> </body></html> <script type="text/javascript"> $(window).load(function(){ var a =$(".box ul li:gt(0):not(:last)"); a.hide(); $(".boxdown").click(function(){ if(a.is(':visible')){ a.slideUp('fast'); $(this).removeClass('up'); }else{ a.slideDown('fast').show(); $(this).addClass('up'); } }); }); function queryclick(val,nid){ $("#container").hide(); $("#container2").show(); $.ajax({ url:'index.php?sub=ok&val='+val+'&nid='+nid, type:'post', data:'val='+val + '&nid='+nid, async : true, success: function(msg){ $('#container2').load('index.php'); //alert(msg); } }); } // 網路地圖1 字數顯示省略掉了 // 網路地圖2 map2 = new BMap.Map("container2"); map2.centerAndZoom(new BMap.Point(114.751465,38.628394), 10); getBoundary2("曲陽"); function getBoundary2(sRegion){ var bdary2 = new BMap.Boundary(); bdary2.get(sRegion, function(rs){ //獲取行政區域 //map2.clearOverlays(); //清除地圖覆蓋物 var count2 = rs.boundaries.length; //行政區域的點有多少個 for(var i = 0; i < count2; i++){ var ply2 = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 5, strokeColor: "#ff0000", fillColor: ""}); //建立多邊形覆蓋物 map2.addOverlay(ply2); //添加覆蓋物 //map2.setViewport(ply2.getPath()); //調整視野 } }); } var data_info2 = [ <?php if($_GET['nid'] == 1){ $sql3="select * from biaozhu where xiangzhen = '".$_GET['val']."'";} if($_GET['nid'] == 2){ $sql3="select * from biaozhu where xingji = '".$_GET['val']."'";} if($_GET['nid'] == 3){ $sql3="select * from biaozhu where renkou = '".$_GET['val']."'";} //$sql3="select * from biaozhu";$query3=mysql_query($sql3); while($row3=mysql_fetch_array($query3)){ ?> [<?php echo $row3['jingwei']?>, "<?php echo $row3['title']?>", "<?php echo $row3['img1']?>", "<?php echo $row3['img2']?>", "<?php $sql5="select * from article where tid='".$row3['id']."'"; $query5=mysql_query($sql5); while($row5=mysql_fetch_array($query5)){ echo $row5['id']."|";} ?>", "<?php $sql6="select * from article where tid='".$row3['id']."'"; $query6=mysql_query($sql6); while($row6=mysql_fetch_array($query6)){ echo $row6['title']."|";} ?>"], <?php}?> ]; var opts2 = { width : 450, // 信息窗口寬度 height: 300, // 信息窗口高度 title : "地圖標注" , // 信息窗口標題 enableMessage:true//設置允許信息窗發送短息 }; var markers2 = []; var pts2 = []; for(var i=0; i<data_info2.length; i++){ var pt2 = new BMap.Point(data_info2[i][0],data_info2[i][1]); pts2.push(pt2); var opts2 = { position : pt2, // 指定文本標注所在的地理位置 offset : new BMap.Size(-19, -37) //設置文本偏移量 } var label2 = new BMap.Label(data_info2[i][2], opts2); // 創建文本標注對象 label2.setStyle({ color : "red", fontSize : "12px", height : "16px", lineHeight : "16px", fontFamily:"微軟雅黑" }); //文本內容添加在標注點上面 map2.addOverlay(label2); map2.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放 var content2 = "<table>"; content2 = content2 + "<tr><td> <img src='" + data_info[i][3] + "' style='width: 100%'></font></td></tr>"; var array11 = data_info[i][5].split("|"); var array22 = data_info[i][6].split("|"); content2 = content2 + "<tr><td>"; for (var t=0 ; t < array11.length ; t++){ content2 = content2 + "<a href='article.php?id="; content2 = content2 + array11[t]; content2 = content2 + "'>"; content2 = content2 + array22[t] + " "; content2 = content2 + "</a>"; } content2 = content2 + "</font></td></tr>"; content2 += "</table>"; var icons2 = data_info[i][4]; var icon2 = new BMap.Icon(icons2, new BMap.Size(30, 30)); //顯示圖標大小 var marker2 = new BMap.Marker(pt2, {icon: icon2}); marker2.setZIndex(50); //標注圖片最上層 map2.addOverlay(marker2); // 將標注添加到地圖中 console.info(marker2); markers2.push(marker2); addClickHandler2(content2,marker2,pt2); } function addClickHandler2(content2,marker2){ marker2.addEventListener("click",function(e){ //console.info(point2); // map2.panTo(point2); openInfo2(content2,e)} ); } var infoWindow2; function openInfo2(content2,e){ var p2 = e.target; var point2 = new BMap.Point(p2.getPosition().lng, p2.getPosition().lat); infoWindow2 = new BMap.InfoWindow(content2,opts2); // 創建信息窗口對象 map2.openInfoWindow(infoWindow2,point2); //開啟信息窗口 } function closeInfo2(){ map2.closeInfoWindow(infoWindow2); } </script>