淘先锋技术网

首页 1 2 3 4 5 6 7

百度地图 弹窗显示

index.html中的内容

<link type="text/css" href="/map.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/11/bmap.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图秘钥"></script>

<script>

function showmap(){
            $('#geographical_position').val(''地图定位的经纬度);
            $('#shi').val(“地图经纬度对应的城市”);
            var sWidth,sHeight; 
   sWidth=screen.width; 
   sHeight=screen.height;
   var bgObj=document.createElement("div"); 
   bgObj.setAttribute('id','bgDiv'); 
   bgObj.style.position="absolute"; 
   bgObj.style.top="0"; 
   bgObj.style.background="#cccccc"; 
   bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 
   bgObj.style.opacity="0.6"; 
   bgObj.style.left="0"; 
   bgObj.style.width=sWidth + "px"; 
   bgObj.style.height=sHeight + "px"; 
   bgObj.style.zIndex = "10";
   document.body.appendChild(bgObj);
   $('#bgDiv').click(function(){
$('.personal').fadeOut(50);
$('#bgDiv').remove();
})
            $(".personal").fadeIn(50);
            eval("map.js"));
           },
        });
}

</script>

<!-- 百度地图弹出层开始-->

<div class="personal">
<div class="txt">
<input type="hidden" value="" id="geographical_position"/>
<input type="hidden" value="" id="shi"/>
    <input type="text" value="" id="txt_content" οnkeydοwn="EnterPress(event)" /></div>
<div id="r-result" class="rsContent"></div>
<div id="dituContent"></div>
<div id="tagging">
  <img src="__PUBLIC__/Images/map/tagging.gif" title="点击生成一个标注" οnclick="drag('tagging')"/>
</div> 
</div>

<!-- 百度地图弹出层结束-->

map.css中的内容

.personal{width:1000px;height:550px;background:#EEF0BF;margin:25px auto;margin-bottom:150px;display: none;z-index: 100;position: absolute;}
.rsContent{float:left;width:255px;display:block;font-size:12px;height: 500px;overflow-y:auto;z-index:10000000;position:absolute;height: 500px;}
.pageList a{margin:0 5px;}
#dituContent{width:1000px;height:500px;border:#ccc solid 1px;float:left;}
.txt{width:1000px;background: #39D0FD;height: 50px;z-index: 200px;line-height: 50px}
#txt_content{width:295px;height: 48px;border: 1px solid #39D0FD;font-size: 20px;border-radius: 5px;vertical-align:30px}
#r-result{height:500px;width:295px;float:left;text-align: left;position:absolute;}
#tagging{width: 42px;height: 42px;position: relative;background: white;float: right;margin-top: -485px;margin-right: 15px;z-index: 100000}

map.js中文件内容是

var map = new BMap.Map("dituContent");            // 创建Map实例
map.centerAndZoom(new BMap.Point(index.html中的经纬度), 13);


window.openInfoWinFuns = null;
var options = {
  onSearchComplete: function(results){
    // 判断状态是否正确
    if (local.getStatus() == BMAP_STATUS_SUCCESS){
        var s = [];
        s.push('<div style="font-family: arial,sans-serif; border: 1px solid rgb(153, 153, 153); font-size: 12px;">');
        s.push('<div style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">');
        s.push('<ol style="list-style: none outside none; padding: 0pt; margin: 0pt;">');
        openInfoWinFuns = [];
        for (var i = 0; i < results.getCurrentNumPois(); i ++){
            var marker = addMarker(results.getPoi(i).point,i);
            var openInfoWinFun = addInfoWindow(marker,results.getPoi(i),i);
            openInfoWinFuns.push(openInfoWinFun);
            // 默认打开第一标注的信息窗口
            var selected = "";
            if(i == 0){
                selected = "background-color:#f0f0f0;";
                openInfoWinFun();
            }
            s.push('<li id="list' + i + '" style="margin: 2px 0pt; padding: 0pt 5px 0pt 3px; cursor: pointer; overflow: hidden; line-height: 17px;' + selected + '" οnclick="openInfoWinFuns[' + i + ']()">');
            s.push('<span style="width:1px;background:url(red_labels.gif) 0 ' + ( 2 - i*20 ) + 'px no-repeat;padding-left:10px;margin-right:3px"> </span>');
            s.push('<span style="color:#00c;text-decoration:underline">' + results.getPoi(i).title.replace(new RegExp(results.keyword,"g"),'<b>' + results.keyword + '</b>') + '</span>');
            s.push('<span style="color:#666;"> - ' + results.getPoi(i).address + '</span>');
            s.push('</li>');
            s.push('');
        }
        s.push('</ol></div></div>');
        document.getElementById("r-result").innerHTML = s.join("");
    }
  }
};


// 添加标注
function addMarker(point, index){
  var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
    offset: new BMap.Size(10, 25),
    imageOffset: new BMap.Size(0, 0 - index * 25)
  });
  var marker = new BMap.Marker(point, {icon: myIcon});
  map.addOverlay(marker);
  return marker;
}
// 添加信息窗口
function addInfoWindow(marker,poi,index){
    var maxLen = 10;
    var name = null;
    if(poi.type == BMAP_POI_TYPE_NORMAL){
        name = "地址：  "
    }else if(poi.type == BMAP_POI_TYPE_BUSSTOP){
        name = "公交：  "
    }else if(poi.type == BMAP_POI_TYPE_SUBSTOP){
        name = "地铁：  "
    }
    // infowindow的标题
    var infoWindowTitle = '<div style="font-weight:bold;color:#CE5521;font-size:14px">'+poi.title+'</div>';
    // infowindow的显示信息
    var infoWindowHtml = [];
    infoWindowHtml.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
    infoWindowHtml.push('<tr>');
    infoWindowHtml.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">' + name + '</td>');
    infoWindowHtml.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');
    infoWindowHtml.push('</tr>');
    infoWindowHtml.push('</tbody></table>');
    var infoWindow = new BMap.InfoWindow(infoWindowHtml.join(""),{title:infoWindowTitle,width:200}); 
    var openInfoWinFun = function(){
        marker.openInfoWindow(infoWindow);
        for(var cnt = 0; cnt < maxLen; cnt++){
            if(!document.getElementById("list" + cnt)){continue;}
            if(cnt == index){
                document.getElementById("list" + cnt).style.backgroundColor = "#f0f0f0";
            }else{
                document.getElementById("list" + cnt).style.backgroundColor = "#fff";
            }
        }
    }
    marker.addEventListener("click", openInfoWinFun);
    return openInfoWinFun;
}
var local = new BMap.LocalSearch(map, options);
local.search("酒店");