百度地圖 彈窗顯示

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("酒店");