最近看了百度地图的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. c#基础 base和this的区别,在继承上面

    base public Person(string name, int age, char gender) { this.Name = name; this.Age = age; this.Gende ...

  2. 【翻译转载】【官方教程】Asp.Net MVC4入门指南（1）： 入门介绍

    1. Asp.Net MVC4 入门介绍 · 原文地址:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/ ...

  3. [转]Todd.log - a place to keep my thoughts on programming 分布式架构中的幂等性

    Todd.log - a place to keep my thoughts on programming 理解HTTP幂等性 基于HTTP协议的Web API是时下最为流行的一种分布式服务提供方式. ...

  4. 【持续更新】Spring相关

    什么是IoC 什么是AoP Bean的实例化方法--3种 Bean的作用域--常用2种 Bean的生命周期 Bean的装配方式 基于xml的2种装配方式 基于Annotaton的装配方式

  5. Echarts的重点

    官网中,主要看文档的”教程“和”配置项手册“这两部分 1 下载 引入js 页面放一个容器,一定要设宽高 创建对象:var myChart = echarts.init(document.getElem ...

  6. 有关在python中使用Redis（一）

    python作为一种处理数据的脚本语言本身有许多方法函数供大家使用,有时候为了提升数据处理速度(如海量数据的访问或者海量数据的读取),涉及分布式管理架构,可能需要用到Redis,Redis是一个开源的 ...

  7. 织梦list/arclist标签调用文章内容

    list标签: 1. 进入后台->模型表单-> 频道模型 -> 内容模型管理 -> 修改对应的模型 2. 列表附加字段-填写body 3. 调用时添加“addfields='b ...

  8. react中constructor和super()以及super(props)的区别。

    react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 const ...

  9. cookie存验证码时间，时间没走完不能再次点击

    <script> var balanceSeconds=getcookie('Num'); console.log(balanceSeconds) var timer; var isCli ...

  10. 得到本地机器的IP地址

    实现效果: 知识运用: DNS类的GetHostByName   //获取指定DNS主机名的DNS信息 public static IPHostEntry GetHostByName (string ...