近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能。煞费苦心的研究半天，终于能将两个功能合二为一，现将代码贴出来分享给大家，希望你们的砖搬得又快又好。注释不多，具体请参照:http://lbsyun.baidu.com/index.php?title=jspopular

　　注意：这段代码最好能上传到新浪云等免费空间，用手机打开连接即可看到效果，不然看不到看不到看不到哦。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <style type="text/css">
      body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
      body{position: relative;}
      #outMap{height:500px;width:100%;position: absolute;top:2.8rem;}
      #r-result{width:100%;}
      .top{width: 95%;height: auto;margin: .5rem auto;position: relative;z-index: 3;font-family: Arial;font-size: 13.3px;}
      /*.box{width:100%;height:1.5rem;position: absolute;top:0;left: 0;}*/
      .top input{width: 80%;height: 1.5rem;}
      .top .btn{background: orangered;border:none;width: 15%;height: 1.5rem;
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;}
      .moren{width: 80.7%;height: 1.3rem;border-bottom:1px solid #a9a9a9;border-left:1px solid #a9a9a9;border-right:1px solid #a9a9a9;position: absolute; }
      .img{background: url(search.png)no-repeat;background-size: 80%;}
      .close{width: 80.7%;height: 1.1rem;line-height:1.1rem;border-bottom:1px solid #a9a9a9;border-left:1px solid #a9a9a9;border-right:1px solid #a9a9a9;position: absolute;top:3.3rem;display: box;display: -webkit-box;}
      .left{width: 80.7%;height: 1.2rem;}
      .right{-webkit-box-flex: 1;box-flex:1;border-left:1px solid #a9a9a9;text-align: center;line-height: 1.2rem;}
   </style>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6VArBpbbbMjBVP22TflHkpSq"></script>
   <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> 
   <title>百度地图</title>
</head>
<body>
   <!--步骤：1.写一个div用来容纳百度地图;-->
       <!--2.输入公司的地址之后，获取这个input的value;-->
       <!--3.点击搜索 使得地图跳到公司的位置;-->
   <div class="top">
         <input type="text" id="keyword" />
         <button class="btn" id="searchResultPanel" onclick="search()">搜索</button>
   </div>
   <div id="outMap"></div>
   <div id="r-result">
   </div>

</body>
</html>
<script type="text/javascript">

   // 百度地图API功能

window.onload=function(){
   navigator.geolocation.getCurrentPosition(translatePoint);
}

function translatePoint(position){ 
   var currentLat = position.coords.latitude; 
   var currentLon = position.coords.longitude; 
   var gpsPoint = new BMap.Point(currentLon, currentLat); 
   BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标 
} 
var map;
function initMap(point){ 
//初始化地图 
   map = new BMap.Map("outMap"); 
   map.addControl(new BMap.NavigationControl()); 
   map.addControl(new BMap.ScaleControl()); 
   map.addControl(new BMap.OverviewMapControl()); 
   map.centerAndZoom(point, 15); 
   map.addOverlay(new BMap.Marker(point)) 
} 
 function search(){
                var keyword = document.getElementById("keyword").value;
                var local = new BMap.LocalSearch(map, {
                renderOptions:{map: map}
            });
            local.search(keyword);
            }
   //定位
// var map = new BMap.Map("outMap");
// map.centerAndZoom("生命科学园", 15);
// var myCity = new BMap.LocalCity();
// myCity.get(function(){
////      alert(rs.name);
//    map.setCenter(40.0747430000,116.1580900000);
// });

</script>
最后附上本人百度地图demo的链接，发送到手机即可查看，欢迎批评指正：http://1.jingcode.applinzi.com/map/geolocation.html

百度地图API的自动定位和搜索功能（移动端）的更多相关文章

  1. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 百度地图api使用，简单搜索+经纬度定位+自定义消息窗口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. 百度地图API 重新生成点聚合的功能

    百度点聚合用来解决加载大量点要素到地图上产生覆盖现象的问题,并提高性能. http://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbo ...

  4. 百度地图API的自动定位路线查询

    功能如下:打开时自动定位到当前位置(浏览器可能会屏蔽自动定位功能,建议手机查看,或直接打开地址:http://1.jingcode.applinzi.com/test2.html),输入目的地点击搜索 ...

  5. 吐槽贴：百度地图 api 封装 的实用功能 [源码下载]

    ZMap 类 功能介绍 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐 ...

  6. 深入浅出百度地图API开发系列（3）：模块化设计

    在前面两张简单介绍了百度地图API的基础知识和使用之后,我们来分析一下百度地图API的基本架构,了解一下基本架构可以帮助我们更清晰的了解API的功能和调用过程,也就可以帮助我们在实际开发中可以更方便的 ...

  7. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  8. android百度地图开发之自动定位所在位置与固定位置进行驾车，步行，公交路线搜索

    最近跟着百度地图API学地图开发,先是学了路径搜索,对于已知坐标的两点进行驾车.公交.步行三种路径的搜索(公交路径运行没效果,待学习中),后来又 学了定位功能,能够获取到自己所在位置的经纬度,但当将两 ...

  9. 通过百度地图API实现搜索地址--第三方开源--百度地图（三）

    搜索地址功能是建立在能够通过百度地图API获取位置的基础上 通过百度地图定位获取位置详情:http://www.cnblogs.com/zzw1994/p/5008134.html package c ...

随机推荐

  1. 【COCOS2DX-游戏开发之三四】cocos2dx 3.0 TableView特殊使用方法:滚动时不能选择等等

    cocos2dx 3.0版本号TableView拍生自ScrollView,经常使用来做滚动列表,有几种特殊使用方法,不知道大家用到过没 要求:1.滚动时不能选中TableCell,非滚动状态才干选中 ...

  2. 关于ligerform中select与text的赋值与取值

    如有下ligerform表单: var formData = [ { display: "区域", name: "QYYJ", newline: true, l ...

  3. 自己写CPU第九阶段（5）——实现负载存储指令2（改变运行阶段）

    我们会继续上传新书<自己动手写CPU>.今天是第42篇.我尽量每周四篇,可是近期已经非常久没有实现这个目标了,一直都有事.不好意思哈. 开展晒书评送书活动,在q=%E4%BA%9A%E9% ...

  4. Operating System 概述和学习图

    Operating System 概述和学习图 大神绕道,鄙人初入 OS . 一.想知OS,先知计算机系统概述 #图解 #基本指令和中断周期 #直接内存存取(Direct Memory Access, ...

  5. Step one : 熟悉Unix/Linux Shell 常见命令行 (三)

    3.学会使用一些管理命令 ps/top/lsof/netstat/kill/tcpdump/iptables/dd 端口查看 ps -- process status ps aux  观察程序所有程序 ...

  6. iOS基础 - 静态库

    一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的区别? 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链接时不复制,程序运行时由系 ...

  7. iOS基础 - Copy

    copy和mutableCopy 一个对象使用copy或mutableCopy方法可以创建对象的副本 copy – 需要先实现NSCoppying协议,创建的是不可变副本(如NSString.NSAr ...

  8. MVC中用Jpaginate分页

    MVC中用Jpaginate分页 So easy!(兼容ie家族)   看过几款分页插件,觉得Jpaginate比较简约,样式也比较容易的定制,而且体验也比较好,支持鼠标滑动效果.先上效果图: 整个过 ...

  9. C++中内存泄露的检测

    C++没有java的内存垃圾回收机制,在程序短的时候可能比较容易发现问题,在程序长的时候是否有什么检测的方法呢? 假设有一个函数可以某点检测程序的内存使用情况,那是否可以在程序开始的时候设置一个点,在 ...

  10. [Usaco2008 Mar]River Crossing渡河问题[简单DP]

    Description Farmer John以及他的N(1 <= N <= 2,500)头奶牛打算过一条河,但他们所有的渡河工具,仅仅是一个木筏. 由于奶牛不会划船,在整个渡河过程中,F ...