<!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:"微软雅黑";}

        #l-map{height: 220px;width:100%;}

        #r-result,#r-result table{width:100%;}

        .nav { width: 100%; height: 2em; line-height: 2em; background: #EDEDED; border: 1px solid #ADADAD;}

        .nav .nav-inner{ width: 30%; margin-left: 35%;}

        .nav .nav-sub { float: left; width: 33%;}

        .nav .nav-sub a { text-decoration: none; }

        .nav .nav-sub a i { display: inline-block; background: url("http://webmap1.map.bdstatic.com/wolfman/static/common/images/ui3/mo_banner_ba37b5d.png")}

        .nav .nav-sub a.bus i { background-position: -1px -192px; position: relative; top: 2px; width: 13px; height: 16px;}

        .nav .nav-sub a.driver i { background-position: -29px -194px; width: 15px; height: 14px;}

        .nav .nav-sub a.walk i { background-position: -102px -189px; width: 16px; height: 18px;}

        .nav .nav-sub a.bus.cur i { background-position: -15px -192px; }

        .nav .nav-sub a.driver.cur i { background-position: -45px -194px; }

        .nav .nav-sub a.walk.cur i { background-position: -120px -189px;}

        .hide { display: none;}

        input { font-family: "micrsoft yahei"; width: 80%; height: 2em; font-size: 1em; line-height: 2em; border: 0px; outline: 0px; padding: .2em 1em; margin: 0em 10%;}

        .btn-group { width: 100%; border-top: 1px solid #DDD; border-bottom: 2px solid #DDD;}

        button {width: 32%; text-align: center; border: 0; border-radius: 0; background-color: inherit; height: 44px; line-height: 44px; font-size: 15px;}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FbzOyQ4YujPrZsxiQKoB07aB"></script>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>

    <title>导航示例</title>

</head>

<body>

    <div id="search">

        <input type="text" id="start" placeholder="正在定位您的位置..." style="border-bottom: 1px solid #DDD; " />

        <input type="text" id="end" value="汽车西站-公交车站" readonly="true" />

        <input type="hidden" id="start_point" value=""/>

        <input type="hidden" id="end_point" value="112.918571,28.214124"/>

        <input type="hidden" id="start_location" value=""/>

        <div class="btn-group">

            <button id="bus-search">公交</button>

            <button id="driver-search">驾车</button>

            <button id="walk-search">步行</button>

        </div>

    </div>

    <div id="showMap" class="hide">

        <div class="nav">

            <div class="nav-inner">

                <div class="nav-sub"><a href="#" class="bus"><i></i></a></div>

                <div class="nav-sub"><a href="#" class="driver cur"><i></i></a></div>

                <div class="nav-sub"><a href="#" class="walk"><i></i></a></div>

            </div>

            <!-- <a href="javascript:;" id="reLocation">重新导航</a> -->

        </div>

        <div id="l-map"></div>

        <div id="r-result"></div>

    </div>

<script type="text/javascript">

$(function(){

    var ep = $("#end_point").val().split(",");

    var map = new BMap.Map("l-map");

    var point = new BMap.Point(ep[0], ep[1]);

    map.centerAndZoom(point, 16);

    // 定位对象

    var geoc = new BMap.Geocoder();

    var geolocation = new BMap.Geolocation();

    geolocation.getCurrentPosition(function(r){

        if(this.getStatus() == BMAP_STATUS_SUCCESS){

            //var mk = new BMap.Marker(r.point);

            //map.addOverlay(mk);

            //map.panTo(r.point);

            $("#start_point").val(r.point.lng+','+r.point.lat);

            setLocation(r.point);

            showMap();

        }else {

            $("#start").attr("placeholder","请输入您的当前位置")

            alert('无法定位到您的当前位置，导航失败，请手动输入您的当前位置！'+this.getStatus());

        }

    },{enableHighAccuracy: true});

    $(".nav .nav-sub a").click(function(){

        $(".nav .nav-sub a").removeClass('cur');

        $(this).addClass('cur');

        searchRoute();

    })

    $("#reLocation").click(function(){

        reLocation();

    });

    $("#bus-search,#driver-search,#walk-search").click(function(){

        var id = $(this).attr("id");

        $(".nav .nav-sub a").removeClass('cur');

        if(id == "bus-search"){

            $(".nav .nav-sub a.bus").addClass('cur');

        }else if(id == "driver-search"){

            $(".nav .nav-sub a.driver").addClass('cur');

        }else if(id == "walk-search"){

            $(".nav .nav-sub a.walk").addClass('cur');

        }

        showMap();

    })

    function reLocation(){

        $("#search").show();

        $("#showMap").hide();

        map = new BMap.Map("l-map");

    }

    function showMap(){

        $("#srarch").hide();

        $("#showMap").show();

        searchRoute();

    }

    function setLocation(point){

        geoc.getLocation(point, function(rs){

            var addComp = rs.addressComponents;

            var result = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;

            $("#start").val(result);

            $("#start_location").val(result);

            searchRoute();

        });

    }

    function searchRoute(s_, e_){

        map = new BMap.Map("l-map");

        var cur = $(".nav .nav-sub a.cur");

        var type = "";

        if(cur.hasClass('bus')){

            type = "bus";

        }else if(cur.hasClass('driver')){

            type = "driver";

        }else if(cur.hasClass('walk')){

            type = "walk";

        }else{

            type = "driver";

        }

        var s_;

        var e_;

        var sl = $("#start_location").val();

        var s = $("#start").val();

        var sp = $("#start_point").val();

        var e = $("#end").val();

        var ep = $("#end_point").val();

        if(s != sl){// 如果用户修改了地址（与定位的位置不一致）则使用地址搜索

            s_ = s;

            e_ = e;

        }else if(sp){// 否则使用坐标搜索

            var ps = sp.split(",");

            var pe = ep.split(",");

            s_ = new BMap.Point(ps[0], ps[1]);

            e_ = new BMap.Point(pe[0], pe[1]);

        }

        if(type == "bus"){

            var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});

            transit.search(s_, e_);

        }else if(type == "driver"){

            var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});

            driving.search(s_, e_);

        }else if(type == "walk"){

            var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});

            walking.search(s_, e_);

        }

    }

})

</script>

</body>

</html>

=========================================================================================

php端根据经纬度 从百度api获取地址等信息

获取远程文件：//这个函数可以直接返回一个远程url地址中的显示在浏览器中的内容

    public function geturlcontent($url) {

        $this->layout = false;

        if (function_exists('file_get_contents')) {

            $file_content = @file_get_contents($url);

        } elseif (ini_get('allow_url_fopen') && ($file = @fopen($url, 'rb'))){

            $i = 0;

            while (!feof($file) && $i++ < 1000) {

                $file_content .= strtolower(fread($file, 4096));

            }

            fclose($file);

        } elseif (function_exists('curl_init')) {

            $curl_handle = curl_init();

            curl_setopt($curl_handle, CURLOPT_URL, $url);

            curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT,2);

            curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER,1);

            curl_setopt($curl_handle, CURLOPT_FAILONERROR,1);

            curl_setopt($curl_handle, CURLOPT_USERAGENT, 'Trackback Spam Check'); //引用垃圾邮件检查

            $file_content = curl_exec($curl_handle);

            curl_close($curl_handle);

        } else {

            $file_content = '';

        }

        return $file_content;

    }

核心代码

function get_gps_address($lat,$lng,$type)

 {

  $url="http://api.map.baidu.com/geocoder/v2/?ak=se0o5ZCif8WBlePtDwnpOmfL&callback=info&location=".$lat.",".$lng."&output=json&pois=0";

  $result=geturlcontent($url);//返回的是百度给出的json字符串

  $result=substr($result,29);//去除生成json字符串的左边renderReverse&&renderReverse(  让json字符串逐渐规范

  $result=substr($result,0,strlen($result)-1); //去除生成json字符串最右边的 ) 让json字符串规范

  $obj=json_decode($result);//转换成json格式对象

  return $obj->{'result'}->{'addressComponent'}->{$type}; //这里的result  addressComponent是百度api返回的json字符串给出的固定字符串，不能修改

 }

调用函数时，前两个参数意思很明确，$type用来控制返回地址信息中哪个信息，具体如下：
 //国家  country
 //省份  province
 //城市  city
 //地区  district
 //街道  street
 //街道号码  street_number

比如：
get_gps_address(40.232709033466,116.22945303887,"country") //返回国家
get_gps_address(40.232709033466,116.22945303887,"province") //返回省份
get_gps_address(40.232709033466,116.22945303887,"city") //返回城市
get_gps_address(40.232709033466,116.22945303887,"district") //返回地区
get_gps_address(40.232709033466,116.22945303887,"street") //返回街道
get_gps_address(40.232709033466,116.22945303887,"city") //返回城市

获取的结果如下：

renderReverse&&renderReverse({"status":0,"result":{"location":{"lng":121.42815637297643,"lat":31.2397306184407},"formatted_address":"上海市普陀区曹杨路268号","business":"曹杨,武宁路,曹家渡","addressComponent":{"country":"中国","country_code":0,"province":"上海市","city":"上海市","district":"普陀区","adcode":"310107","street":"曹杨路","street_number":"268号","direction":"附近","distance":"6"},"pois":[{"addr":"普陀区曹杨路272号","cp":" ","direction":"西","distance":"59","name":"曹杨路办公楼","poiType":"房地产","point":{"x":121.42868085088264,"y":31.239634306940503},"tag":"房地产;写字楼","tel":"","uid":"b15972de6900eefd88b98820","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"上海市普陀区谈家渡路28号","cp":" ","direction":"西南","distance":"93","name":"盛泉大厦","poiType":"房地产","point":{"x":121.42870780004795,"y":31.240274967381226},"tag":"房地产;写字楼","tel":"","uid":"4ea3f2f1a8e733d4afcb6682","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"上海市普陀区曹杨路272-1号","cp":" ","direction":"附近","distance":"30","name":"交运奥迪(曹杨路店)","poiType":"汽车服务","point":{"x":121.42839339311945,"y":31.239618869285374},"tag":"汽车服务;汽车销售","tel":"","uid":"e98a187414026c659cf77989","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"普陀区曹杨路188号(曹杨路顺义路)","cp":" ","direction":"西北","distance":"115","name":"招商银行(曹杨路支行)","poiType":"金融","point":{"x":121.42873474921325,"y":31.238985923231348},"tag":"金融;银行","tel":"","uid":"373cf757e018a4134354d7ea","zip":"","parent_poi":{"name":"上钞大厦","tag":"房地产;写字楼","addr":"上海普陀区曹扬路176号","point":{"x":121.42895932559074,"y":31.238877858842835},"direction":"西北","distance":"142","uid":"49a02a7a733569412b201acb"}},{"addr":"上海普陀区曹扬路176号","cp":" ","direction":"西北","distance":"142","name":"上钞大厦","poiType":"房地产","point":{"x":121.42895932559074,"y":31.238877858842835},"tag":"房地产;写字楼","tel":"","uid":"49a02a7a733569412b201acb","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"普陀区曹杨路333号4楼(近宁夏路中山公园商业圈)","cp":" ","direction":"东南","distance":"150","name":"君满堂宾馆","poiType":"酒店","point":{"x":121.42723457901158,"y":31.240575999084915},"tag":"酒店;其他","tel":"","uid":"8cba4bb0917f609dad045711","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"上海市普陀区西谈家渡路17弄-1-～8号","cp":" ","direction":"南","distance":"111","name":"上海市第十二职业技能鉴定所","poiType":"政府机构","point":{"x":121.42811491841137,"y":31.240591436582073},"tag":"政府机构;公检法机构","tel":"","uid":"f0d8064d82b22e793be4a660","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"西谈家渡路81弄1-11号｜西谈家渡路129弄1-6号｜西谈家渡路162-164号｜西谈家渡路21号｜西谈家渡路39弄1-6号","cp":" ","direction":"南","distance":"83","name":"西谈家渡路公房","poiType":"房地产","point":{"x":121.42806102008076,"y":31.240367592624023},"tag":"房地产;住宅区","tel":"","uid":"f16018735dfa51abd22dd6b9","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"西谈家渡路18号(曹杨路谈家渡路)","cp":" ","direction":"南","distance":"111","name":"上海沪西大众汽车维修站","poiType":"汽车服务","point":{"x":121.42811491841137,"y":31.240591436582073},"tag":"汽车服务;汽车维修","tel":"","uid":"0dc3d82ddee24f7575e5b647","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}},{"addr":"曹杨路333号2层","cp":" ","direction":"东南","distance":"150","name":"中国教育","poiType":"教育培训","point":{"x":121.42723457901158,"y":31.240575999084915},"tag":"教育培训;中学","tel":"","uid":"56fc7e36129e3a7fcc06a42c","zip":"","parent_poi":{"name":"","tag":"","addr":"","point":{"x":0.0,"y":0.0},"direction":"","distance":"","uid":""}}],"roads":[],"poiRegions":[],"sematic_description":"曹杨路办公楼西59米","cityCode":289}})

												


											
百度地图API自动定位和3种导航的更多相关文章
	

    
								
  1. 【百度地图API】如何制作自定义样式的公交导航结果面板？
		
    原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
    
		
    2. 
						
  2. Android应用中使用百度地图API并加入标注（一）
		
    网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包       要在Android应用中使用百度地图API,就须要 ...
    
		
    3. 
						
  3. Android 百度地图API 定位 导航
		
    看看这个利用百度地图定位并实现目的地导航的Demo. 首先看实现效果:                          进 入后首先会得到当前位置,在地图上显示出来.在输入框中输入目的地后,就会在地 ...
    
		
    4. 
						
  4. 百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法
		
    原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提 ...
    
		
    5. 
						
  5. 【百度地图API】让用户选择起点和终点的驾车导航
		
    原文:[百度地图API]让用户选择起点和终点的驾车导航 摘要: 如果用户搜索“从机场到火车站”,使用驾车导航DrivingRoute会默认显示一条结果.但同一个城市可能有多个机场和火车站,那么,如何用 ...
    
		
    6. 
						
  6. 【百度地图API】如何制作多途经点的线路导航——驾车篇
		
    原文:[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----- ...
    
		
    7. 
						
  7. 【百度地图API】关于如何进行城市切换的三种方式
		
    原文:[百度地图API]关于如何进行城市切换的三种方式 摘要:本文介绍了三种切换城市的方式:查询城市.城市列表和显示城市轮廓. ------------------------------------ ...
    
		
    8. 
						
  8. 【百度地图API】圣诞节里不会迷路的麋鹿——驾车导航
		
    原文:[百度地图API]圣诞节里不会迷路的麋鹿--驾车导航 任务描述: 可能大家还不知道,圣诞老人是爱迷路的老爷爷! 今年圣诞节又要到了,圣诞老人又要出来送礼物了.可是,他灰常的迷路呢! 还好,他有一 ...
    
		
    9. 
						
  9. 百度地图API的自动定位和搜索功能（移动端）
		
    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. h5py库安装问题解决
			
    H5py官网教程完全有问题,这个大家都这么说,但是貌似问题出现在Numpy上,由于numpy的版本过高! 这里是官网的教程:http://docs.h5py.org/en/latest/build.h ...
    
			
    2. 
						
  2. NotePad++编译代码
			
    前言: 1.VS很强大,运行调试很方便,各种补全插件应有尽有. 2.冗余太多,有时候只想写几个小算法而已,打开软件就是一分钟了. 3.使用轻量级的NotePad++,可以帮助快速提升能力.手码代码,眼 ...
    
			
    3. 
						
  3. js中的面向对象--类似于类的概念
			
    创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 使用object va ...
    
			
    4. 
						
  4. Error building Player: UnityException: Bundle Identifier has not been set up correctly
			
    错误提示: Error building Player: UnityException: Bundle Identifier has not been set up correctlyPlease s ...
    
			
    5. 
						
  5. Linux网络管理-相关笔记【自用】
			
    ISO/OSI七层模型应用层            APDU 应用层协议数据单元   越靠近用户表示层            PPDU 表示层协议数据单元会话层            SPDU 会话协 ...
    
			
    6. 
						
  6. idea 控制台行数限制
			
    在本地进行测试时,会出现报错太多idea控制台被限制打印出来的日志被清楚的现象: idea改变控制台打印log限制的方法: 1. 点击 File ->Settings ->editor - ...
    
			
    7. 
						
  7. Xshell 本地上传、远程下载文件
			
    1.Xshell登录工具在创建会话的时候,点击最下面的ZMODEM,可以填写下载的路径和加载的路径:2个路径可以一样也可以不一样: 在下载的时候可以下载到相应的路径去.(我设置的是下载前始终询问) 2 ...
    
			
    8. 
						
  8. MFC 如何在一个类中使用在其他类中定义的变量或函数
			
    [声明:本文的知识点来源于网络,参考网址:https://blog.csdn.net/bill_ming/article/details/7407848] [以下三种方法亲测有效,可以根据具体情况来选 ...
    
			
    9. 
						
  9. redisUtils
			
    package com.icil.elsa.subscribe.milestone.common.utils; import java.io.Serializable; import java.uti ...
    
			
    10. 
						
  10. 线程池构造类 ThreadPoolExecutor 的 5 个参数
			
    1.corePoolSize :核心线程数 2.maxPoolSize: 最大线程数 3.keepAliveTime :闲置线程存活时间 4.unit:参数keepAliveTime的时间单位,有7种 ...
    
			
    11.