最近看了百度地图的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/

百度地图的API接口----多地址查询和经纬度的更多相关文章

  1. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  2. 如何结合自己本地数据库，使用【百度地图】API

    如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...

  3. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  4. [android学习]__使用百度地图开放api编写地图定位app

    前言 在前面我已经记录关于如何使用百度地图api,以及如何配置相关的androidstudio配置了,接下来将记录如何使用百度地图api开发简单的地图定位apk,我将决定不定期持续更新本篇笔记,在每个 ...

  5. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  6. 百度地图代码API

    百度地图代码API: http://api.map.baidu.com/lbsapi/creatmap/index.html

  7. WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现

    原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...

  8. 基于百度地图SDK和Elasticsearch GEO查询的地理围栏分析系统（1）

    本文描述了一个系统,功能是评价和抽象地理围栏(Geo-fencing),以及监控和分析核心地理围栏中业务的表现. 技术栈:Spring-JQuery-百度地图WEB SDK 存储:Hive-Elast ...

  9. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

随机推荐

  1. oracle v$database 视图

    Select db.dbid "数据库标识",--数据库的标识,当数据库在所有文件的头部创建和存储时计算出来的标记编号       db.Name "数据库名称" ...

  2. 在CentOS上源码安装Nginx

    总步骤: wget http://nginx.org/download/nginx-1.10.1.tar.gz tar -xvf nginx-1.10.1.tar.gz cd nginx-1.10.1 ...

  3. 关于dataTable 生成JSON 树

    背景: POSTGRESL + C#  + DHTMLX SUIT 一个表生成一个JSON串,这个不是很麻烦: 1.在数据库(postges)中:  json_agg(row_to_json(t)) ...

  4. Docker的下载安装以及简单使用

    Docker的简介 Docker是一个基于GO语言开发的应用容器,它是一款适合运维人员和后段开发人员学习的开源容器引擎.Docker容器可以让开发的应用或者依赖包存储其中,可以运行在任何的Linux ...

  5. 零基础逆向工程15_C语言09_位运算

    1.汇编中的移位指令 算数移位指令 指令格式:SAL/SAR Reg/Mem, CL/Imm SAL(Shift Arithmetic Left):算数左移 SAR(Shift Arithmetic ...

  6. 51nod 1191 消灭兔子

    题目来源: 2013腾讯马拉松赛第三场 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 有N只兔子,每只有一个血量B[i],需要用箭杀死免子.有M种不同类型的箭可以 ...

  7. zend studio failed to create java virtual machine无法启动的解法

    zend studio failed to create java virtual machine 解决方案:在安装目录下修改ZendStudio.ini中第十四行处改成 -Xmx512M. -sta ...

  8. poi实现Excel输出

    /** * 第一个demo 导出Excel文件 * 第一行 第三个单元格中 写入 zhangsan */ @Test public void test1() throws IOException { ...

  9. Python基础篇 -- 集合

    set集合 set 中的元素是不重复的,无序的 里面的元素必须是可hash的,(int str tuple bool) set 就是dict 类型的数据,但是不保存value 只保存 key set集 ...

  10. sencha touch 入门学习资料大全

    现在sencha touch已经更新到2.3.1版本了 重新整理一下资料 官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...