百度地图地址/坐标选择器

最新推荐文章于 2023-12-08 11:23:09 发布
原创最新推荐文章于 2023-12-08 11:23:09 发布 · 1.2k 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#javascript #ViewUI
javascript 专栏收录该内容
70 篇文章
订阅专栏
本文介绍了一个使用百度地图API实现自动定位和地址搜索的功能。点击地址选择器后，会弹出百度地图遮罩层，允许用户通过输入关键字进行搜索，并在地图上展示搜索结果。成功获取地址后，系统将返回地址和坐标。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
支持自动定位功能
点击地址选择器后

弹出选择百度图片遮罩层页面

点击确认，得到地址和坐标
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>选择地址</title>
    <link rel="stylesheet" type="text/css" href="statics/front2/css/address.css?v=20180315"/>
    <script type="text/javascript" src="/Public/js/libs/jquery.js?v=20170630"></script>
</head>
<body style="padding-top: 45px;" class="bg_f6">
<div class="add_get_address " id="send-car-location-area">
    <div class="edit-get-send bb-d1 arrow">
        <i class="icon-location l"></i>

        <p>选择地址</p>

        <p class="info-grey location">地址回调这</p>
    </div>
</div>

<input type="hidden" class="p_x" name="sendcar_mapx" id="sendcar_mapx" value="106.486654"/>
<input type="hidden" class="p_y" name="sendcar_mapy" id="sendcar_mapy" value="29.490295"/>
<input type="hidden" class="p_address" name="sendcar_address" id="sendcar_address" value=""/>

<div class="my-address-box" id="my_address_box" style="display: block;">
    <header class="date-head pr border-b">
        <h1 class="sub-title color-black">
            选择地址
        </h1>
        <span class="header-back" id="tips-hide" onclick="$('#my_address_box').height(0);">返回</span>
    </header>
    <div class="warp pr">
        <div class="address-map" id="allmap"></div>
        <div class="search-address-list" style="display: block;">
            <div class="search-form">
                <input type="text" id="mapSearch" value="" placeholder="输入关键字搜索"/>
            </div>
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            <ul>
                <li data-x="116.52764276815923" data-y="40.029964692006445">
                    <p class="place-name">武汉市</p>

                    <p class="details">武汉市江岸区沿江大道188号武汉市人民政府</p>
                </li>
            </ul>
        </div>
        <div class="address-list-tips center" id="loading">
            <p style="display: inline-block;">
                <span class="l"><img height="22" src="/Public/images/loading.gif" alt=" "/></span>
                <span>正在获取您的位置...</span>
            </p>
        </div>
    </div>
</div>
<div class="edit-address-box">
    <div class="edit-address">
        <h4 class="edit-address-head">编辑地址</h4>

        <p class="edit-textarea">
            <textarea name="textarea" id="textarea" cols="30" rows="5"></textarea>
        </p>

        <p class="center">
            <a class="tips-btn" href="#" id="add_submit">确认</a>
            <a class="tips-btn btn-grey" href="#" id="add_cancel">取消</a>
        </p>
    </div>
</div>

<!--百度地图API功能-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=7f68b333fd4443c8c0612aab3411d687"></script>
<script src="/Public/js/plugins/geo.js"></script>
<script>
$(function () {
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.enableScrollWheelZoom(true);
    var point = new BMap.Point(116.508266, 39.88053);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    map.centerAndZoom(point, 15);

    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl);
    // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationSuccess", function (e) {
        // 定位成功事件
        point = map.getCenter();
        geoCoder();
    });
    geolocationControl.addEventListener("locationError", function (e) {
        // 定位失败事件
        alert(e.message);
    });
    map.addControl(geolocationControl);

    //建立一个自动完成的对象，关键字提示输入
    var ac = new BMap.Autocomplete({"input": "mapSearch", "location": map});
    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += value;
        $("#searchResultPanel").html(str);
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        $("#searchResultPanel").html("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);

        setPlace();
    });
    function setPlace() {
        function myFun() {
            point = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            $('#mapSearch').attr('data-x', point.lng);
            $('#mapSearch').attr('data-y', point.lat);
            map.centerAndZoom(point, 15);
            geoCoder();
        }

        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    var $searchAddressList = $('.search-address-list>ul').empty();
    var addressList = [];
    var timer2;
    //拖拽重新设置地图中心点和附件地址列表
    map.addEventListener("dragend", function (e) {
        point = map.getCenter();
        marker.setPosition(point);
        timer2 && clearTimeout(timer2);
        timer2 = setTimeout(function () {
            geoCoder();
        }, 500);
    });

    function makeList(pois, key) {//附件地址列表
        $searchAddressList.empty();
        for (var i = 0; i < pois.length; i++) {
            var poi = pois[i];
            var name = poi.name;
            var addr = poi.addr;
            if (!key || (key && key.length > 0 && poi.name.indexOf(key) > -1)) {
                $searchAddressList.append('<li data-x="' + poi.point.x + '" data-y="' + poi.point.y + '"><p class="place-name">' + poi.name + '</p><p class="details">' + addr + '</p></li>');
            }
        }
        if ($searchAddressList.children().length == 2) {
            $searchAddressList.children().last().remove();
        }
        var $lis = $searchAddressList.children();
        if ($lis.length == 2) {
            var name1 = $lis.eq(0).find('.place-name');
            var name2 = $lis.eq(1).find('.place-name');
            if (name1 == name2) {
                $searchAddressList.children().last().remove();
            }
        }
    }

    function geoCoder() {
        marker.setPosition(point);
        var send = {
            ak: "7f68b333fd4443c8c0612aab3411d687",
            location: point.lat + ',' + point.lng,
            output: 'json',
            pois: 1
        };
        $.ajax({
            url: 'http://api.map.baidu.com/geocoder/v2/',
            dataType: 'jsonp',
            data: send,
            success: function (data) {
                if (data.status == 0 && data.result) {
                    var pois = data.result.pois;
                    addressList = pois;
                    makeList(pois);
                }
            }
        })
    }

    //-------------------------------------------------
    var clickBox = '';
    $('#loadimg').show();
    //点击地址框
    var availH = Math.max(document.body.scrollHeight, document.body.clientHeight);
    $('#my_address_box').height(0);
    $('#send-car-location-area').click(function () {
        clickBox = $(this);
        $('#my_address_box').css('z-index', '999').height(availH);
        $(window).scrollTop(0);
        if (clickBox.parent().find('.p_x').val() && clickBox.parent().find('.p_y').val()) {
            point = new BMap.Point(clickBox.parent().find('.p_x').val(), clickBox.parent().find('.p_y').val());
            map.panTo(point); //移动地图中心点
        } else {
            //自动定位
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    //自动定位后，设置地图中心点
                    point = new BMap.Point(r.point.lng, r.point.lat);
                    map.centerAndZoom(point, 15);
                    geoCoder();
                    ac = new BMap.Autocomplete({"input": "mapSearch", "location": map});
                }
                else {
                    console.log('定位失败:' + this.getStatus());//定位失败
                }
            }, {enableHighAccuracy: true});
        }
        geoCoder();

        $('#loadimg').hide();
    });

    $('#mapSearchSubmit').click(function () {
        var pointX = $('#mapSearch').attr('data-x');
        var pointY = $('#mapSearch').attr('data-y');

        if (pointX == '' || pointY == '') {
            alert('请从搜索结果中选择一个地址');
            return false;
        }

        $('#textarea').val($('#mapSearch').val());

        clickBox.siblings('.p_x').val(pointX);
        clickBox.siblings('.p_y').val(pointY);
        $('#sendcar_mapx').val(pointX);
        $('#sendcar_mapy').val(pointY);

        $('#add_submit').click();
    });

    //选择地址列表
    var choiceAdd = '';
    $(document).on('click', '.search-address-list li', function () {
        var pointX = $(this).attr('data-x');
        var pointY = $(this).attr('data-y');

        $('.edit-address-box').show();
        var addName = $(this).find('.place-name').html();
        var addDetails = $(this).find('.details').html();
        choiceAdd = addDetails + addName;
        $('#textarea').val(choiceAdd);

        clickBox.siblings('.p_x').val(pointX);
        clickBox.siblings('.p_y').val(pointY);
        $('#sendcar_mapx').val(pointX);
        $('#sendcar_mapy').val(pointY);
    });
    $('#textarea').val(choiceAdd);
    //编辑地址
    $('#add_cancel').click(function () {
        $('.edit-address-box').hide();
    });
    //提交地址
    $('#add_submit').click(function () {
        var add_detail = $('#textarea').val();
        clickBox.find('.location').html(add_detail);
        clickBox.siblings('.p_address').val(add_detail);
        $('#send-car-location-area').find('.location').html(add_detail);
        $('#sendcar_address').val(add_detail);
        $('.edit-address-box').hide();
        $('#my_address_box').css('z-index', '-11').height(0);
        return false;
    });
})
</script>
</body>
</html>