一个界面显示多张百度地图---坐标是从后台传入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>//引入百度API

<script type="text/javascript">

var lng = "";//经度

var lat = "";//纬度

var name= "map";

function initialize() {



    if(lng=="") lng = 116.404;

    if(lat=="") lat = 39.915;

    var point = new BMap.Point(lng, lat); 

    var marker = new BMap.Marker(point); 

    var map = new BMap.Map(name);

    

    map.centerAndZoom(point, 11);

    map.enableScrollWheelZoom();//开启滚轮

    

    map.addOverlay(marker);  //建立标注

    

    var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL};

    map.addControl(new BMap.NavigationControl(opts)); //修改控件配置

    

    map.addEventListener("click", function(e){ 

        lng = e.point.lng;

        lat = e.point.lat;

        //var center = map.getCenter();   

        //alert("地图中心点变更为：" + center.lng + ", " + center.lat);

        map.removeOverlay(marker);

        point = new BMap.Point(lng, lat); 

        marker = new BMap.Marker(point); 

        map.addOverlay(marker);  // 随机向地图添加10个标注  

        $("[name='manor.longitude']").val(lng);

        $("[name='manor.latitude']").val(lat);

    });  

}

function load(lng1,lat1,name1){

   lng =lng1;

   lat = lat1;

   name= name1;

   initialize();

};



$(document).ready(function(){

   $('span').each(function(){ //根据后台数据，实际要显示的数量

       this.click();

   });



});



</script>

上面是显示多张地图的脚本。 $('span').each(function(){  this.click(); });因为百度地图显示时需要不同的DIV的ID，这里click事件，利用JS函数，传入参数。

 

function load(lng1,lat1,name1)这个是加载具体的每个地图的函数，传入不同的经度和纬度以及对应DIV的ID。
下面看一下HTML

    <s:iterator value="pageInfo.pageData" var="manor" status="sta">

    <div class="finds_content">

         <div class="fic_left">

            <div class="fil_img" style="width:500px;height:345px">

            <a href="#"><img src="${manor.topImg}" alt="图片加载失败" ></a>

            </div>

            <div class="fil_title">${manor.business}</div>

            <div class="fil_btn">

            <input type="button"  id="detail" value="我 去" class="fb_btn" onclick="detail('${manor.shopId}')"/>

            </div>

      </div>

  <span  onclick="load('${manor.longitude}','${manor.latitude}','${manor.shopId}')"></span>

  <div id="${manor.shopId}" style="width:400px;height:345px"></div>

    </div>

    <div class="clear"></div>

    </s:iterator>

循环输出后台的数据，<span onclick="load('${manor.longitude}','${manor.latitude}','${manor.shopId}')"></span>每次点击时调用LOAD函数，从而显示地图。