百度api获取经纬度及详细位置

最新推荐文章于 2025-05-18 14:35:53 发布

擎苍乄远航

最新推荐文章于 2025-05-18 14:35:53 发布

阅读量695

点赞数

分类专栏： MVC

MVC 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种将地图定位功能与地址输入相结合的技术，包括地区选择、详细地址输入、经纬度获取等功能，实现精准定位与地址录入的无缝对接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<form>

<div class="row">
        <div class="col-md-12">
            <div class="portlet box grey">
                <div class="portlet-title" style="cursor: pointer">
                    <div class="caption">
                        <i class="icon-table"></i>地区区域选择
                    </div>
                    <div class="tools">
                        <a class="collapse" href="javascript:;"></a>
                    </div>
                </div>
                <div class="portlet-body form" style="max-height:700px">
                    <div class="form-body">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label col-md-2  form-required" style="text-align:right">地 区</label>
                                    <div class="col-md-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">省</span>
                                            @Html.SmartDropDownListFor(m => m.Province, (List<SelectListItem>)ViewBag.BagProvince, new { @class = "select2 form-control" })
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">市</span>
                                            @Html.SmartDropDownListFor(m => m.City, (List<SelectListItem>)ViewBag.BagCity, new { @class = "select2 form-control" })
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">区</span>
                                            @Html.SmartDropDownListFor(m => m.Area, (List<SelectListItem>)ViewBag.BagArea, new { @class = "select2 form-control" })
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label col-md-4">详细地址</label>
                                    <div id="r-result">
                                        <div class="col-md-8">
                                            @Html.SmartTextBoxFor(m => m.Address, "详细地址")
                                        </div>
                                        <div id="SearchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <div class="col-md-2">
                                    </div>
                                    <div class="col-md-10">
                                        <div style="width: 600px; height: 400px; border: 1px solid gray; float: left" id="NceduMap">
                                        </div>
                                        <div id="results_info" style="height:100px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label col-md-4 form-required">经度</label>
                                    <div class="col-md-6">
                                        @Html.SmartTextBoxFor(m => m.Longitude, "请在地图上选择位置获取经纬度")
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label col-md-4 form-required">纬度</label>
                                    <div class="col-md-6">
                                        @Html.SmartTextBoxFor(m => m.Latitude, "请在地图上选择位置获取经纬度")
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</form>

<script type="text/javascript">
    $(function () {
        var address = $("#Province").find("option:selected").text() + $("#City").find("option:selected").text() + $("#Area").find("option:selected").text();
        MblogDotccMap(address);
        //下拉框选择事件
        //下拉框选择事件
        $("#Province,#City,#Area").change(function () {
            ChangeAddress(this);
        });
        //地址键盘事件
        $("#Address").keyup(function () {
            ChangeSearchAddress(this);
        })
    });

    //选择地址
    function ChangeAddress(obj) {
        MblogDotccMap($(obj).find("option:selected").text());
    }
    //搜索地址
    function ChangeSearchAddress(obj) {
        var address = $("#Province").find("option:selected").text() + $("#City").find("option:selected").text() + $("#Area").find("option:selected").text() + $(obj).val();
        MblogDotccMap(address);
    }

    function MblogDotccMap(keyword) {
        var map = new BMap.Map("NceduMap"); // 创建地图实例
        var point = new BMap.Point(116.404, 39.915); // 创建点坐标
        map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
        map.addControl(new BMap.NavigationControl()); //添加缩放控件
        map.addControl(new BMap.ScaleControl()); //添加比例尺控件
        map.addControl(new BMap.OverviewMapControl()); //添加缩略图控件
        map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
        map.enableKeyboard(); // 启用键盘操作。
        var geoc = new BMap.Geocoder();//创建分析
        //显示鼠标单击位置经纬度坐标
        map.addEventListener("click", function (e) {

            geoc.getLocation(e.point, function (rs) {
                var addComp = rs.addressComponents;
                //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                $("#Address").val(addComp.street + " " + addComp.streetNumber);
            });
            $("#Latitude").val(e.point.lat);
            $("#Longitude").val(e.point.lng);
        });

        //搜索
        var local = new BMap.LocalSearch(map, {
            pageCapacity: 4,

            renderOptions: {
                map: map,
                panel: "results_info"
            }
        });
        map.panBy(point);
        local.search(keyword);
        local.getResults()
        //local.setSearchCompleteCallback(function (searchResult) {
        //    var poi = searchResult.getPoi(0);
        //    $("#Latitude").val(e.point.lat);
        //    $("#Longitude").val(e.point.lng);
        //});
    }
</script>