1,第一步當(dāng)然是建立地圖放置的容器嘛,這個不解釋<div class="s_r" style="float:left;width:680px;height:620px;margin-top:10px " id="container2"></div> 2,地圖旁增加一排文字,把標(biāo)注點(diǎn)的信息一個一個都列出來,這個以后要用于和地圖上的標(biāo)注連接起來的,在這邊點(diǎn)擊一下,地圖那邊標(biāo)注相應(yīng)的點(diǎn)就彈出提示信息了,樣式就是如下<ul><u class="name"><a href="" target="_blank"id="list0">標(biāo)注點(diǎn)1</a></u><li >簡介1</li><uclass="name"><a href="" target="_blank"id="list1">標(biāo)注點(diǎn)2</a></u><li >簡介2</li></ul>這個東西不要手工寫,最好用php把數(shù)組循環(huán)出來寫進(jìn)去,這個數(shù)組就是你要標(biāo)注的點(diǎn)的所有信息啊,比如名字,電話,標(biāo)注點(diǎn)的經(jīng)緯度,數(shù)據(jù)庫的id號等等,因?yàn)楹竺嬖趈avascript中也要用到這個php的數(shù)組,保持順序一致是很重要的,不要問我這個數(shù)組哪里來,這個問自己...,我這邊的是這樣寫的,$areashoplist就是準(zhǔn)備好的數(shù)組,$是數(shù)組中元素的順序,寫在這里便于以后分辨連接.<?phpforeach($areashoplist as $=>$rs){?><ul> <u class="name"> <a href="<?php echo W_BASE_URL;?>dealers/<?php echo $rs["id"]?>/" target="_blank" id="list<?php echo $ ?>"><?php echo $rs['company']?> </a> </u> <li ><?php echo $rs['address']?></li> <li>銷售熱線：<?php echo $rs['tel']?></li></ul><?php}?> 3,下來就可以去頁面的下面寫javascript代碼了,首先要把php后臺給你的數(shù)組$areashoplist變成javascript的數(shù)組,這個很簡單嘛,就是循環(huán)嘛,按著格式循環(huán)出來就行了.var markerArr=[<?php foreach($areashoplist as $map){echo "{title:\"".$map['company']."\",content:\"".$map['address']."\",nt:\"".$map['mapnt']."\",isOpen:0,tel:\"".$map['tel']."\"},"; } ?> ]最后循環(huán)后的樣式應(yīng)該是這個樣子就對了:　　var markerArr=[　　{title:"陜西華岳汽車",content:"西安市西三環(huán)與富魚路十字西南角",nt:"10
8.872982,3
4.2581",isOpen:0,tel:""},　　{title:"陜西福海達(dá)汽車銷售服務(wù)有限公司",content:"西安市西三環(huán)外阿房一路西段95號 ",nt:"",isOpen:0,tel:"029-84253121"},　　] 4,準(zhǔn)備工作做完了,下來開始做地圖吧,前面幾步都是一樣的,城市中心點(diǎn)哪里,我是根據(jù)ip在數(shù)據(jù)庫里查出的城市名,分配下來的,這樣保證中心點(diǎn)一直在城市中心//開始寫地圖基本信息var map = new BMap.Map("container2");//var pp =new BMap.Point("西安"); // 定義一個中心點(diǎn)坐標(biāo)map.centerAndZoom("<?php echo $cityname ?>",12); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別。10為市級,這里的中心點(diǎn)用php寫入"西安",這里不能加市字 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); //定義向地圖中添加縮放控件map.addControl(ctrl_nav); //向地圖中添加縮放控件 //向地圖中添加縮略圖控件var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});map.addControl(ctrl_ove); //向地圖中添加比例尺控件var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca); 5,地圖準(zhǔn)備工作做完了,下來要做就是添加標(biāo)注點(diǎn)了,上面準(zhǔn)備的那個數(shù)組就可以哪來用了,這里另外還準(zhǔn)備了幾個數(shù)組,用來存放標(biāo)注點(diǎn)和提示信息窗口var nt=new Array(); //存放標(biāo)注點(diǎn)經(jīng)緯信息的數(shù)組var marker=new Array(); //存放標(biāo)注點(diǎn)對象的數(shù)組var info=new Array(); //存放提示信息窗口對象的數(shù)組for(var i=0;i<markerArr.length;i++){　　p0 = markerArr[i].nt.split(",")[0]; //　　p1 = markerArr[i].nt.split(",")[1]; //按照原數(shù)組的nt格式將地圖點(diǎn)坐標(biāo)的經(jīng)緯度分別提出來　　nt[i] = new BMap.Point(p0,p1); //循環(huán)生成新的地圖點(diǎn)　　marker[i]=new BMap.Marker(nt[i]); //按照地圖點(diǎn)坐標(biāo)生成標(biāo)記　　map.addOverlay(marker[i]); //在地圖上循環(huán)添加標(biāo)記　　info[i]=new BMap.InfoWindow("<b class='iw__title' title='" + markerArr[i].title + "'>" + markerArr[i].title + "</b><div class='iw__content'>"+markerArr[i].content+"</div><div class='iw__content'>銷售熱線:"+markerArr[i].tel+"</div>");//生成提示信息窗口,并將窗口對象按順序存入數(shù)組中}好了現(xiàn)在標(biāo)注點(diǎn),提示信息都按順序存入數(shù)組了,提示點(diǎn)在地圖上也已經(jīng)顯示出來了 6,下來就該把提示信息和相關(guān)的標(biāo)注點(diǎn)綁定起來了,還是按循環(huán)一個一個的取,因?yàn)閮蓚€數(shù)組的順序都是一樣的,所以配對就好配對了<?phpfor($i=0;$i<count($areashoplist);$i++){?>　　marker[<?php echo $i;?>].addEventListener("mouseover", function(){this.openInfoWindow(info[<?php echo $i;?>]);});<?php} ?>最后的結(jié)果就是有多少個標(biāo)注點(diǎn),綁定多少次,數(shù)組的下標(biāo)已經(jīng)固定了,不存在i值變化的情況,就繞開了開頭提的那個閉包問題,在下顯示應(yīng)該是這樣的:　　　　　　　　　marker[0].addEventListener("mouseover", function(){this.openInfoWindow(info[0]);}); marker[1].addEventListener("mouseover", function(){this.openInfoWindow(info[1]);}); marker[2].addEventListener("mouseover", function(){this.openInfoWindow(info[2]);}); marker[3].addEventListener("mouseover", function(){this.openInfoWindow(info[3]);}); .........................................7,下來該給外面的超鏈接綁定地圖上標(biāo)注點(diǎn)的顯示了;有了上面的提示信息窗口數(shù)組,用jquery綁定一個當(dāng)然就很簡單了<?phpfor($i=0;$i<count($areashoplist);$i++){　　if(is_null($areashoplist[$i]['mapnt'])){ //如果mapnt沒有設(shè)置則跳過本次循環(huán),執(zhí)行下一個循環(huán)　　continue;　　}?>　　$('#list<?php echo $i;?>').live('mouseover',function(){　　map.openInfoWindow(info[<?php echo $i;?>],nt[<?php echo $i;?>]); //將信息提示窗口的顯示按順序綁定給外部的鏈接文字　　return false;　　}); <?php　} //循環(huán)結(jié)束?>