百度地图获取搜索地址的坐标(经纬度)

第三方接口 376浏览 评论

利用百度地图提供的Javascript Api根据城市创建地图,然后搜索地址并获取地址的坐标(经纬度)。

效果:操作步骤

image.png

1、选择一个城市

2、点击创建地址坐标(创建当前选择城市地图),效果图如下

image.png

3、输入地区具体地址,活着选择地图某一个地点,标记地图位置,获取地理位置坐标

image.png

4、点击某一个地点获取坐标

image.png


5.点级确认坐标,将坐标标记到表单,提交到数据库
image.png具体应用场景:

1、计算某点到某点的距离。

2、根据坐标逆向获得具体地理位置。

3、总之坐标在旅游、餐饮、团购项目的运用非常广泛。

4、其他的需求可以根据具体api开发,接口文档算是比较良心的。

下面来看如何实现上述

1、表单页

<form>
    <div class="row cl">
        <label class="form-label col-xs-4 col-sm-3">选择地区:</label>
        <div class="formControls col-xs-8 col-sm-9">
            <span class="select-box" style="width:150px;">
            <select class="select" name="city_name" size="1" id="city_name">
               <option value=''>选择地区</option>
               <option value='北京'>北京</option>
               <option value='上海'>上海</option>
               </select>
            </span>
            <span><button class="btn btn-primary radius" onclick="create_map(); return false;">创建地址坐标</button></span>
    
            <span>经度:<input type="text" disabled="disabled" name="lng" id="form_lng" style="border: 1px solid #ccc; height: 30px; background-color: #c0c0c0;"></span>
            <span>纬度:<input type="text" disabled="disabled" name="lat" id="form_lat" style="border: 1px solid #ccc; height: 30px; background-color: #c0c0c0;"></span>
    
        </div>
    </div>
</form>

2、创建地图容器

<style>
    #show_map{
        background: rgba(0,0,0,0.5);
        filter:alpha(opacity=50);
        -moz-opacity:0.5; -khtml-opacity: 0.5;
        width: 100%;
        height: 800px;
        position: absolute;
        top: 0;
        display: none;
        z-index: 777;
    }
    #containers{
        z-index: 999;
        height: 500px;
        background: #ffffff;
        width: 80%;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 0;
        bottom: 0;
    }
    #container{
        width: 100%;
        height: 500px;
    }
    .input_map{ border: 1px solid #ccc; height: 31px; padding: 0 3px;}
    .search{ padding:10px 10px;}
    #btnSearch,#btnConfirm,#btnCloseMap{height: 31px; border:1px solid #ccc; padding:3px 5px;}
</style>
<div id="show_map">
    <div id="containers">
        <div class="search">
            输入地区详细位置:<input type="text" id="search_area_name" class="input_map">
            <button id="btnSearch">查坐标</button>
            当前地理坐标为:<span id="lng">0.00</span>  <span id="lat">0.00</span>

            <button id="btnConfirm">确认坐标</button>

            <button id="btnCloseMap" style="text-align: right;">关闭地图</button>
        </div>

        <div id="container"></div>
    </div>
</div>

3、先选择城市,点击创建地图坐标调用:create_map()方法

var maps; //全局变量保存map对象
var city; //全局变量保存城市信息
function create_map()
{
//获取选择城市
    var city_name  = $("#city_name").val();
    if(city_name == '选择地区'){
        layer.msg('请选择城市',{icon:5,time:1000});
        return;
    }
    //创建map实例
    var map   = new BMap.Map("container");        // 创建地图实例
    map.centerAndZoom(city_name, 15);
    //设置城市
    map.setCurrentCity(city_name);
    map.enableScrollWheelZoom(true);
    maps = map;
    city = city_name;
    //展示地图
    $("#show_map").show();
    //监听点击地图时候触发
    maps.addEventListener("click", function(e){
            //获得经纬度,并赋值
            $("#lng").text(e.point.lng);
            $("#lat").text(e.point.lat);
        }
    );
    
    //查询坐标
    $("#btnSearch").click(function () {
    var address = $("#search_area_name").val();
    if(address == ''){
        layer.msg('请填写详细的地址信息',{icon:5,time:1000});
        return;
    }
    var myGeo = new BMap.Geocoder();
    myGeo.getPoint(address, function(point){
            if (point) {
                maps.centerAndZoom(point, 16);
                var marker = new BMap.Marker(point);  // 创建标注
                maps.addOverlay(marker);               // 将标注添加到地图中
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                $("#lng").text(point.lng);
                $("#lat").text(point.lat);

            }else{
                layer.msg('在地图上没有找到该地区,请确认位置正确性!',{icon:5,time:1000});
            }
        }, city);

    //监听点击事件
    maps.addEventListener("click", function(e){
        $("#lng").text(e.point.lng);
        $("#lat").text(e.point.lat);
        }
    );
});
}

$("#btnConfirm").click(function () {
    var lng = $("#lng").text();
    var lat = $("#lat").text();

    if(lng == '0.00' || lat == '0.00'){
        layer.msg('请选择正确的坐标!',{icon:5,time:1000});
        return;
    }

    $("#form_lng").val(lng);
    $("#form_lat").val(lat);
    $("#show_map").hide();

});

$("#btnCloseMap").click(function () {
    $("#show_map").hide();
});

最终效果


image.png

这样就根据地图实际地理位置获取到具体的经纬度。当然可以直接根据具体地理位置使用api获取到经纬度,我们需要在地图上选择地址并且获取经纬度的原因是确定位置真实可用,位置精确,百度地图提供丰富的接口,可以实现非常棒的效果。百度地图在其他行业运用非常广泛,可以尝试下哦!

本文连接:http://www.phpbloger.com/article/66.html 文章都为原创,转载请注明出处!

相关文章