初步接触百度地图API

最新推荐文章于 2020-09-10 16:07:35 发布

cily_undefined

最新推荐文章于 2020-09-10 16:07:35 发布

阅读量627

点赞数

分类专栏： web前端文章标签：百度地图

本文链接：https://blog.csdn.net/qq_29326717/article/details/70859183

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

最近做项目的时候用到百度地图，在这里分享一下

test.html部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.2/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.2/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
    <div id="wrapper" style="width: 500px;height: 500px;margin: auto;background-color: #E6E8EA;">
        <div style="height: 30px;">当前位置：<span id="current_location"></span></div>
        <div>
            <input name="order_site" class="easyui-textbox" id="order_site" value="" required/>
            <a href="javascript: void(0);" οnclick="orderSite()">查询</a>
            <div id="searchResultPanel" style=""></div>
            <div id="detailed_addr"></div>
            <!-- 经度 -->
            <input type="text" name="point_lng" id="point_lng">
            <!-- 纬度 -->
            <input type="text" name="point_lat" id="point_lat">
        </div>
        
    </div>

    <!-- 地图 -->
    <div style="width:0;height:0;" id="allmap"></div>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hRSacxw4qF1QCkl8jIliBnry"></script>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>

test.js部分

var map = new BMap.Map("allmap");
map.centerAndZoom("北京",12);

$(document).ready(function(){
    hideSRP();
    currentLocation();
});

var addrArray = [];//检索地址
var addrTitle;//简称
var addrPointLng;//经度
var addrPointLat;//纬度
var detailedAddr;//详细地址
function orderSite(){
    var kyword = $("#order_site").textbox("getValue");
    var inner = [];
    var local = new BMap.LocalSearch(
            map, 
            {
                renderOptions: {map: map, panel: "searchResultPanel"},
                pageCapacity: 5,
                onResultsHtmlSet:function(){
                    $("#searchResultPanel").css({
                        "display":"block"
                    });
                    var a = local.getResults();
                    /*var addr = a.or.length;
                    alert(addr);*/
                    for(var i=0; i<a.ur.length; i++){
                        addrArray.push(a.ur[i]);
                    }
                    
                    $("#searchResultPanel li").click(function(e){
                        var index = $(this).index();
//                      alert(index);
                        addrTitle = a.ur[index].title;
                        addrPointLng = a.ur[index].point.lng;
                        addrPointLat = a.ur[index].point.lat;
                        detailedAddr = a.ur[index].address;
                        $("#order_site").textbox("setValue",detailedAddr);
                        $("#point_lng").val(addrPointLng);
                        $("#point_lat").val(addrPointLat);
                        $("#detailed_addr").text(detailedAddr);
                        $("#searchResultPanel").css({
                            "display":"none"
                        });
                    });
                    
                },
            }
        );
    local.search(kyword);
    
}
//隐藏列表
function hideSRP(){    
    $(document).bind("click",function(e){
        var target = $(e.target);
        if(target.closest("#searchResultPanel").length == 0){
            $("#searchResultPanel").css({
                "display":"none"
            });
        }
    })

}
/*
 * 获取当前位置
 */
function currentLocation(){
    var geolocation = new BMap.Geolocation();
     geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var lng = r.point.lng;
            var lat = r.point.lat;
            var point = new BMap.Point(lng, lat);
            var marker = new BMap.Marker(point); 
            map.addOverlay(marker);
            map.centerAndZoom(point, 15);
            map.addControl(new BMap.NavigationControl());
            $.ajax({
                    url:'http://api.map.baidu.com/geocoder/v2/?ak=hRSacxw4qF1QCkl8jIliBnry&callback=renderReverse&location='+lat+","+lng+'&output=json&pois=1',
                    type: "get",
                    dataType: 'jsonp',
                    jsonp : "callback",
                    success:function(data){
                        if(data.status==0){
                            var re = data.result;
                            var lo = re.formatted_address;
//                          alert(lo+"附近");
                            var cl = re.pois[0].addr;
                            $("#current_location").text(re.pois[0].addr);
                        };
                    }
            });
        }
        else {
            alert('failed'+this.getStatus());
        }        
     },{enableHighAccuracy: true})
}