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

最新推荐文章于 2020-08-13 16:11:43 发布

weixin_30474613

最新推荐文章于 2020-08-13 16:11:43 发布

阅读量109

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shenghaishiweini/p/3635241.html

版权

<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>