百度地图的API接口----多地址查询和经纬度

最近看了百度地图的API的接口，正想自己做点小东西，主要是多地址查询和经纬度坐标跟踪，
下面的代码直接另存为html就可以了，目前测试Chrome和360浏览器可以正常使用。
<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html,body{height:100%;margin:0px;padding:0px}  


.top{height:70px;}
 
 
.footer{
position:absolute;
top:70px;
bottom:0px;
width:100%;
}


.search_div_input{
    width: 500px;
    margin:10px 0 0 10px;
    float: left;
    height: 50px;
}

.search_div_btn{
    width: 200px;
    margin:8px 0;
    float: left;
    height: 50px;
}

.search_text {
    margin: 5px 3px;
    padding: 3px;
    font-size: 17px;
    line-height:26px;
    height: 26px;
    width: 96%;
    border: 1px solid #cdcdcd;
}

.search_btn{
    height: 36px;
    width: 95px;
    margin:5px;
    border: 1px solid #cdcdcd;
}

/*----------------------*/

.hand{
padding:10px 0;
color:#fff;
cursor:pointer;}

.bg{
background-color:#0099CC}

.left_r{
text-align:center;
height:100%;
width:100%;
display:none;
}

.right_main{height:100%;
width:100%;
float:left;
}

textarea
{
width:98%;
height:90%;
}

.sf{
background-color:#8a2;
cursor:pointer;
z-index:20;
height:40px;
line-height:38px;
margin-top:-15px;
top:50%;
left:0px;
position:absolute;

}
.div_border{
    background-color:#929;
    cursor:e-resize;
    z-index:19;
    display:block;
    width:2px;
    height:100%;
    position:absolute;
}

.route{width:100%;float:left;border:1px solid red;height:30px;}
.route ul{list-style:none;margin:0px -30px; width:100%;}
.route li{float:left;width:60px;line-height:30px;}

.route a{display:block;text-align:center;height:30px;}
.route a:link{color:#6f6;text-decoration:none;}
.route a:visited{color:#666;text-decoration:underline;}
.route a:hover{color:#FFF; font-weight:bold;text-decoration:none;}

.route ul li i {margin-top:3px;display: inline-block;
background-image: url(http://webmap1.map.bdstatic.com/wolfman/static/common/images/ui3/mo_banner_ba37b5d.png);

background-repeat: no-repeat;
}
.bus-tab i{width: 14px;height: 16px;background-position: -1px -192px;}
.drive-tab i{width: 16px;height: 15px;background-position: -29px -192px;}
.walk-tab i{width: 18px;height: 18px;background-position: -62px -189px;}
.bike-tab i{width: 20px;height: 16px;background-position: -83px -216px;}



</style>  


    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2&ak=3b4abe8cd9e27790a933cd28cebe6eb4"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

<script>

function chk(obj,n)
{
    var chls1=document.getElementById("border").children;
    var chls2=document.getElementById("tdLeft").children;
    for(var i=0;i<chls1.length;i++)
    {
        chls1[i].className="hand";
        chls2[i].style.display="none";
        chls2[i+1].style.display="none";
    }
    obj.setAttribute("class","hand bg");
    chls2[n+1].style.display="block";
}

function zoom(obj)
{
    if(obj.innerText==">")
    {
        obj.innerHTML="&lt;";
        document.getElementById("td_left").style.display="";
        obj.style.left="-2px";
    }
    else{
        obj.innerHTML="&gt;";
        document.getElementById("td_left").style.display="none";
        obj.style.left="3px";
    }
}

function mDown(e){
    var div_bd = document.getElementById("div_border");
    if(e.target.id=="div_border")div_bd.down=true;
    
}

function mMove(e) {
    var div_bd = document.getElementById("div_border");
    var td = document.getElementById("td_left");
    if (div_bd.down) {
        td.width=e.clientX+"px";
    }
}

function mUp(e){
    var div_bd = document.getElementById("div_border");
    div_bd.down=false;

}

function kDown(e){
var e = e || window.event; 
if(e.keyCode == 13 && "SearchText" ==document.activeElement.id)search();
}

document.addEventListener('mousedown',mDown);
document.addEventListener('mousemove',mMove);
document.addEventListener('mouseup',mUp);
//监听回车 
document.addEventListener("keydown",kDown);
        

        
</script>

</head>
<body>
<!--form id="locSearch"-->
<div class="top">
    <div class="search_div_input">
        <input type="text" name="word" class="search_text" maxlength="256" id="SearchText" autocomplete="off"  />
    </div>
    <div class="search_div_btn">
        <input value="百度一下" id="poiSearchBtn" class="search_btn"  type="button" onclick="search()" />
    </div>
    <div id=div_test></div>
</div>
<!--/form-->
<div class="footer">
    <table width="100%" height="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td id="td_left" width="300px">
          <table width="100%" height="100%"  cellpadding="0" cellspacing="0" style="visible:">
              <tr>
                <td id="border" width="40px" valign="top" style="text-align:center; background-color:#000;">
                  <div id=divb1 class="hand bg" onClick="chk(this,0);">搜索</div>
                  <div id=divb2 class="hand" onClick="chk(this,1);">跟踪</div>
                  <div id=divb3 class="hand" onClick="chk(this,2);">线路</div>
                </td>
                <td id=tdLeft>
                    <div id=divr0 class="left_r"></div>
                    <div id=divr1 class="left_r" style="display:block">
                        <textarea id="v1" width="100%" rows="5"></textarea><br />
                        <input type="button" onClick="btn1();" class="search_btn"  value="多地址搜索" />
                    </div>
                    <div id=divr2 class="left_r">
                        <textarea id="v2" width="100%" rows="15"></textarea><br />
                        <input type="button" onClick="btn2();" class="search_btn"  value="经纬度标记" />
                    </div>
                    <div id=divr3 class="left_r">
                        <div id="route" class=route>
                        <ul id="route_tab">
                            <li class="tab-item bus-tab" data-index="1">
                            <i></i><span>公交</span>
                            </li>
                        <li class="tab-item drive-tab" data-index="2">
                            <i></i><span>驾车</span>
                        </li>
                        <li class="tab-item walk-tab" data-index="3">
                            <i></i><span>步行</span>
                        </li>
                        <li class="tab-item bike-tab" data-index="4">
                            <i></i><span>骑行</span>
                        </li>
                        </ul></div>
                    </div>
                </td>
              </tr>
            </table>
            </td>
            <td style="margin:auto 0;position:relative;">
                <div id="div_border" class="div_border">    
                </div>
                <div id="sf" class="sf" onClick="zoom(this);">&lt;</div>
                <div id=ditu class="right_main"></div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>


<script type="text/javascript"> 

/***  技术参考：http://developer.baidu.com/map/index.php?title=jspopular  ***/

var map = new BMap.Map("ditu");    
var point = new BMap.Point(116.404, 39.915);    
point = new BMap.Point(121.369311, 31.224454)
map.centerAndZoom(point, 17);    
map.addControl(new BMap.NavigationControl());    
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());  

map.enableScrollWheelZoom(); 

//////////////////////////////////////

var aInfo=new Array();
var ap=new Array();
var am=new Array();
var al=new Array();

function btn1(){

var val = document.getElementById("v1").value;
var av=val.split('\n');
var count=65;
map.clearOverlays();
aInfo=new Array();
ap=new Array();
am=new Array();

// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
for(var i=0;i<av.length;i++)
{
    if(av[i]!="")
    // 将地址解析结果显示在地图上,并调整地图视野
    myGeo.getPoint(av[i], function(pot,opt){
    if (pot) {
        var m=new BMap.Marker(pot);
        var lab = new BMap.Label(opt.address,{offset:new BMap.Size(20,-10)});
        m.setLabel(lab);
        m.id=count++;
        m.enableDragging();
        m.addEventListener("click",showInfo);
        am.push(m);
        ap.push(pot);
        aInfo.push('<div style="margin:0;line-height:20px;padding:2px;">城市：'+ opt.city +'<br />地址：'+ opt.address +'</div>');
        map.addOverlay(m);
    }else{
            alert("您选择地址没有解析到结果!");
        }
    }, 
    "上海市");//查询地址所在地城市
}
setTimeout(function(){map.setViewport(ap);}, 500);
}


function showInfo(e)
{
for(var i=0;i<am.length;i++){am[i].setZIndex(i);}
e.target.setZIndex(1000);
var searchInfoWindow = new BMapLib.SearchInfoWindow(map, aInfo[e.target.id-65], {
    title  : "地址详细信息",  //标题
    width  : 290,             //宽度
    height : 75,              //高度
    panel  : "panel",         //检索结果面板
    enableAutoPan : true,     //自动平移
    searchTypes   :[
        BMAPLIB_TAB_SEARCH,   //周边检索
        BMAPLIB_TAB_TO_HERE,  //到这里去
        BMAPLIB_TAB_FROM_HERE //从这里出发
    ]
});
searchInfoWindow.open(e.target);        
}



function btn2()
{
al=new Array();
ap=new Array();
var val = document.getElementById("v2").value;
var v1=val.split('\n');
if(v1=="jack")
{
    map.addEventListener("click", function(e){
    document.getElementById("v2").value+=e.point.lng + ", " + e.point.lat+"\n";});
    map.setDefaultCursor("crosshair");
    alert("现在可以在地图上拾取坐标点了！");
    return;
}

for(var i=0;i<v1.length;i++)
{
    if(v1[i]!="")
    {
        var p = new BMap.Point(v1[i].split(",")[0], v1[i].split(",")[1]);
        var m=new BMap.Marker(p);
        var lab = new BMap.Label("时间"+i,{offset:new BMap.Size(20,-10)});
        m.setLabel(lab);
        m.enableDragging();
        ap.push(p);
        al.push(p);
    }
}
map.clearOverlays();
var pointCollection = new BMap.PointCollection(ap);  // 初始化PointCollection
map.addOverlay(pointCollection);  

var pline=new BMap.Polyline();
pline.setPath(al);
pline.setStrokeWeight(2); 
map.addOverlay(pline);
map.setViewport(ap); 
}


function search()
{

    var chls1=document.getElementById("tdLeft").children;
    for(var i=0;i<chls1.length;i++)
        chls1[i].style.display="none";
    chls1[0].style.display="block";
var v= document.getElementById("SearchText");
var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map, panel: "divr0",autoViewport:"true"}
    });
    local.search(v.value);
}


</script>
==============================================================
另外再推荐一个别人写的，很好玩的地图应用：
http://liumeijun.com/
posted on 2015-10-18 21:11 jack_Meng 阅读(1575) 评论(0) 编辑收藏举报
刷新页面返回顶部
Jack_孟

百度地图的API接口----多地址查询和经纬度

导航

公告
