ajxs 三级联动对接百度地图

最新推荐文章于 2021-06-26 16:40:35 发布

garbage_code

最新推荐文章于 2021-06-26 16:40:35 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/liuphpgoooo/article/details/109482928

版权

<!doctype html>
<html lang="en">
<head>
    <style>
        #container {

            overflow: hidden;
            width: 200px;
            height: 200px;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="application/javascript"></script>

</head>
<body>
<select class="province" id="sel" name="province">
    <option value="0" >==请选择省==</option>
    @foreach($province as $item)
        <option value="{{ $item->id }}">{{ $item->name }}</option>
    @endforeach
</select>
<select class="city" id="sel1" name="city">
    <option value="0">==市==</option>
</select>
<select class="area" id="sel2" name="area">
    <option value="0">==区/县==</option>
</select>
<div id="container"></div>
<form method="get" action="{{route('admin.add')}}">
    <p>名字:<input type="text" name="truename"></p>
    <p>性别:<input type="text" name="sex"></p>
    <p>手机:<input type="text" name="phone"></p>
    <p>验证码：</p>
    <p>邮箱:<input type="text" name="email"></p>
    <p>个人资料:<textarea name="my" id="my" >资料</textarea> </p>
    <p>级别:<input type="text" name="ob_id"></p>

    <input type="submit">
</form>
</body>
</html>

<!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 富文本实例化编辑器 -->
<script >
    var ue = UE.getEditor('my',{
        initialFrameHeight:400,
        initialFrameWidth:800,
    });
</script>
{{--三级联动--}}
<script type="application/javascript">
    $(function() {
        //当省选项值发生变化的时候，发送ajax请求，获取对应的市区信息，并渲染
        $('.province').change(function() {
            var province = $(this).val();

            $.ajax({
                //请求方式
                type: "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url: "city",
                //数据，json字符串
                data: {
                    "province": province
                },
                //请求成功
                dataType: "json",
                success: function(result) {
                    //console.log(result)
                    if (result.status == 0) {
                        var citys = result.data;

                        var optionstr = "<option value='0'>==市==</option>";
                        //渲染city选择框
                        for (var i = 0; i < citys.length; i++) {
                            var city = citys[i];

                            optionstr += "<option value='" + city.id + "'>" + city.name + "</option>";
                        }
                        $('.city').html(optionstr);
                    } else {
                        alert(result.message);
                    }
                },
                //请求失败，包含具体的错误信息
                error: function(e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });

        })
        $('.city').change(function() {
            var city = $(this).val();

            $.ajax({
                //请求方式
                type: "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url: "area",
                //数据，json字符串
                data: {
                    "city": city
                },
                //请求成功
                dataType: "json",
                success: function(result) {
                    //console.log(result)
                    if (result.status == 0) {
                        var cityss = result.data;

                        var optionstr = "<option value='0'>==市==</option>";
                        //渲染city选择框
                        for (var i = 0; i < cityss.length; i++) {
                            var city = cityss[i];

                            optionstr += "<option value='" + city.id + "'>" + city.name + "</option>";
                        }

                        $('.area').html(optionstr);

                    } else {
                        alert(result.message);
                    }

                },
            });
        })
    })
</script>
{{--百度地图引入--}}
<script>
    function loadJScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '//api.map.baidu.com/api?type=webgl&v=1.0&ak=QGeDePlGM5RazDIyme5I1tqNoF98Ggy8&callback=init';
        document.body.appendChild(script);
    }
    function init(lng,lat) {
        var map = new BMapGL.Map('container'); // 创建Map实例
        var point = new BMapGL.Point(lng,lat); // 创建点坐标
        map.centerAndZoom(point, 13);
        map.enableScrollWheelZoom(); // 启用滚轮放大缩小
    }
    window.onload = loadJScript; // 异步加载地图

    province='';
    city = '';
    area = ''
    dizhi=''
    $("#sel").bind("change",function () {
        province = $("#sel option:selected").text()

    });
    $("#sel1").bind("change",function () {
        city = $("#sel1 option:selected").text()

    });
    $("#sel2").bind("change",function () {
        area = $("#sel2 option:selected").text()
        dizhi+=province+city+area
        console.log(dizhi)
        $.ajax({
            url:"{{route('map')}}",
            type:"get",
            data:{
                'dizhi':dizhi,
            },
            success:function (res) {
                let lng=res.data.result.location.lng
                let lat=res.data.result.location.lat
                init(lng,lat)
            },


        });

    });



</script>

garbage_code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajxs 三级联动对接百度地图

<!doctype html><html lang="en"><head> <style> #container { overflow: hidden; width: 200px; height: 200px; margin: 0; font-family: "微软雅黑"; } </
复制链接

扫一扫