百度地图api实现的定位，导航，附近搜索

r囧r小猫 2022-06-09 07:39 395阅读 0赞

先上效果图：<我的位置图标下载：[http://www.zhouyfei.xin/mapImage/myload.gif][http_www.zhouyfei.xin_mapImage_myload.gif]> 这个图标非常好用，是找的：[http://www.cnblogs.com/shuilangyizu/p/5888031.html][http_www.cnblogs.com_shuilangyizu_p_5888031.html]

<起点 | 终点图标：自ps的，可将就这用>：[http://www.zhouyfei.xin/mapImage/start.png][http_www.zhouyfei.xin_mapImage_start.png]，

[http://www.zhouyfei.xin/mapImage/end.png][http_www.zhouyfei.xin_mapImage_end.png]

实现功能： 1、定位，根据设备自动定位，设置到区，可自行调整；

2、附近地标搜索，显示定位附近图书馆，可更改；

3、路线规划，点选终点或手动输入终点位置；

![SouthEast][]

代码实现：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <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">
            #allmap{width:300px;height:300px;}
            p{margin-left:5px; font-size:14px;}
        </style>
        <style type="text/css">
            body, html {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
            #allmap{height: 350px;width:100%;}
            #r-result,#r-result table{width:100%;}
            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=*******AK可到百度地图开发平台自行申请********"></script>
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
        <title>BookSiYi</title>
    </head>
    <body>
    <div id="search">
        <input type="text" id="start" placeholder="正在定位您的位置..." style="border-bottom: 1px solid #DDD; " />
        <input type="text" id="end" placeholder="请选择终点"  οnchange="searchRoute()"/>
        <div class="btn-group">
            <button id="bus-search" class="button">公交</button>
            <button id="driver-search" class="button">驾车</button>
            <button id="walk-search" class="button">步行</button>
        </div>
    </div>
    <div id="allmap"></div>
    <div id="r-result"></div>
    
    
    
    <script type="text/javascript">
    
            $("#bus-search").css("background-color", "#95B7EE");
            window.start_point = "";
            window.end_point = "";
            // 定位对象
            var map;
            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);
                    window.start_point = r.point.lng+","+r.point.lat;
    
    
                    map = new BMap.Map("allmap");   // 创建Map实例
                    var ep = window.start_point.split(",");
    
    
                    function addMapControl(){
                        //向地图中添加缩放控件
                        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_ZOOM});
                        map.addControl(ctrl_nav);
    
                        //向地图中添加比例尺控件
                        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,offset: new BMap.Size(10, 5)});
                        map.addControl(ctrl_sca);
    
                    }
                    map.centerAndZoom(new BMap.Point(ep[0],ep[1]), 13);
                    map.enableScrollWheelZoom(true);       //启用滚轮放大缩小
                    var local = new BMap.LocalSearch(map, {
                        renderOptions:{map: map}
                    });
                    local.search("图书馆");
    
                    setLocation(r.point);
    
                    addMapControl();
                }else {
                    $("#start").attr("placeholder","请输入您的当前位置")
                    alert('无法定位到您的当前位置，导航失败，请手动输入您的当前位置！'+this.getStatus());
                }
            },{enableHighAccuracy: true});
    
    
            function setLocation(point){
                geoc.getLocation(point, function(rs){
                    var addComp = rs.addressComponents;
                    var result = addComp.province + addComp.city + addComp.district;
                    $("#start").val(result);
    
                    //设置定位图标
                    var new_point = new BMap.Point(rs.point.lng,rs.point.lat);
                    var myIcon = new BMap.Icon("http://www.zhouyfei.xin/mapImage/myload.gif", new BMap.Size(30,30),{
                        anchor:new BMap.Size(13,15),
                        imageOffset:new BMap.Size(0,0)
                    });
                    var marker = new BMap.Marker(new_point,{icon:myIcon,isOpen:true});
                    map.addOverlay(marker);
                    var opts = {
                        width : 40,     // 信息窗口宽度
                        height: 18,     // 信息窗口高度
                        title : "我的位置" , // 信息窗口标题
                        isOpen: 1,
                    }
                    var infoWindow = new BMap.InfoWindow("地址 : "+$("#start").val(), opts);  // 创建信息窗口对象
                    marker.addEventListener("click", function(){
                        map.openInfoWindow(infoWindow,new_point); //开启信息窗口
                    });
                    //设置监听，点选地图设终点，规划路线
                    map.addEventListener("click",
                        function(e) {
                            window.end_point = e.point.lng +","+ e.point.lat;
                            var local = new BMap.LocalSearch(map, {
                                renderOptions:{map: map}
                            });
                            searchRoute();
                        });
                });
            }
    
            var type="bus";
            $("#bus-search,#driver-search,#walk-search").click(function(){
                var id = $(this).attr("id");
                $(".button").css("background-color","#fff");
                $("#"+id).css("background-color","#95B7EE");
                type = "bus";
                if(id == "bus-search"){
                    type = "bus";
                }else if(id == "driver-search"){
                    type = "driver";
                }else if(id == "walk-search"){
                    type = "walk";
                }
                searchRoute();
            });
    
            //搜索路线
            function searchRoute(){
                if($("#end").val().length!=0){
                    var end = $("#end").val();
                    $("#end").val("");
                }else{
                    var pe = window.end_point.split(",");
                    var end = new BMap.Point(pe[0],pe[1]);
                }
                var ps = window.start_point.split(",");
                var start = new BMap.Point(ps[0], ps[1]);
                var starIcon = new BMap.Icon("http://www.zhouyfei.xin/mapImage/start.png", new BMap.Size(22, 32));
                var endIcon = new BMap.Icon("http://www.zhouyfei.xin/mapImage/end.png", new BMap.Size(22,32));
                if(type == "bus"){
                    var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}});
                    transit.search(start, end);
                    transit.setMarkersSetCallback(function(result){
                        result[0].marker.setIcon(starIcon);
                        result[1].marker.setIcon(endIcon);
                    });
                }else if(type == "driver"){
                    var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}});
                    driving.search(start, end);
                    driving.setMarkersSetCallback(function(result){
                        result[0].marker.setIcon(starIcon);
                        result[1].marker.setIcon(endIcon);
                    });
                }else if(type == "walk"){
                    var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}});
                    walking.search(start, end);
                    walking.setMarkersSetCallback(function(result){
                        result[0].marker.setIcon(starIcon);
                        result[1].marker.setIcon(endIcon);
                    });
                    //walking.search("天坛公园","故宫");
                }
            }
    </script>
    </body>
    </html>

[http_www.zhouyfei.xin_mapImage_myload.gif]: http://www.zhouyfei.xin/mapImage/myload.gif
[http_www.cnblogs.com_shuilangyizu_p_5888031.html]: http://www.cnblogs.com/shuilangyizu/p/5888031.html
[http_www.zhouyfei.xin_mapImage_start.png]: http://www.zhouyfei.xin/mapImage/start.png
[http_www.zhouyfei.xin_mapImage_end.png]: http://www.zhouyfei.xin/mapImage/end.png
[SouthEast]: /images/20220609/5eecce1f7a484230a0b258f5d543fe9c.png