首页 > 其他分享> > Laravel ajax三级联动获取地图

Laravel ajax三级联动获取地图

2020-11-03 23:31:47 作者：互联网

三级联动请看:https://www.cnblogs.com/fsp69/p/13919624.html

地图的视图层:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <title>Document</title>
</head>
<style>
    #container {
        overflow: hidden;
        width:300px;
        height: 200px   ;
        margin: 0;
        font-family: "微软雅黑";
    }
</style>


<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=浏览器密码=init';
        document.body.appendChild(script);
    }
    function init(a,b) {
        var map = new BMapGL.Map('container'); // 创建Map实例
        var point = new BMapGL.Point(a, b); // 创建点坐标
        map.centerAndZoom(point, 13);
        map.enableScrollWheelZoom(); // 启用滚轮放大缩小
    }
    window.onload = loadJScript; // 异步加载地图
</script>


<body>
    <form action="doindex" method="get">
     
        <p>
            <select class="province" name="province" id="sheng">
                <option value="0" name="province"  id="sheng">==请选择省==</option>
                @foreach($province as $item)
                    <option value="{{ $item->id }}" name="province">{{ $item->name }}</option>
                @endforeach
            </select>

            <select class="city" name="city" id="shi">
                <option value="0" name="city">==市==</option>
            </select>

            <select class="area" name="area" id="qu">
                <option value="0">==区/县==</option>
            </select>
        </p>

            地图    <div id="container"></div>
        <p>
        <p>
            <input type="submit">
        </p>

    </form>
</body>
</html>

js代码:

<script>
    //设置空变量
    var sheng = ''
    var shi = ''
    var qu = ''
    var dizhi = ''
    var lng =''
    var  lat = ''
    $("#sheng").change(function(){
       sheng = $('#sheng option:selected').text();      //省  获取表单选中的省份

    });
    $("#shi").change(function(){
        shi = $('#shi option:selected').text();      //市    获取表单选中的市

    });
    $("#qu").change(function(){
        qu = $('#qu option:selected').text();      //区      获取表单选中的区
        dizhi = sheng+shi+qu;       //将省市区三个字段合并为dizhi
        console.log(dizhi);

        //发起ajax请求
        $.ajax({
            url:"{{route('tapp')}}",        //地址
            type:'GET',                     //请求类型
            data:{
               "dizhi":dizhi                //传的值
           },
            success:function(res){
                lng = res.data.lng      //经度
                lat = res.data.lat      //纬度
                init(lng,lat)       //调用地图的方法
            }
        })
    })

</script>

控制器:

   //地图
    public function tapp(Request $request){
        $dizhi = $request->input('dizhi');
        $ar= file_get_contents("http://api.map.baidu.com/geocoding/v3/?address=".$dizhi."&output=json&ak=服务端密码");
        $arr = json_decode($ar);
        $data['lng']=$arr->result->location->lng;
        $data['lat']=$arr->result->location->lat;
//        dd($data);
        return ['data'=>$data];
    }

路由:

Route::get('tapp','TextController@tapp')->name('tapp');  // 区

//添加页面 省
public function add(){
//查找省的数据
$province =  DB::table('china_area')->where('parent_id',1)->get();

        return view('test.index',compact('province'));
}

//市
public function city(Request $request){
$province = $request['province'];

$city = DB::table('china_area')->where('parent_id','=',$province)->get()->toArray();

        return json_encode(['status' => 0, 'data' => $city]);
}

//区
public function area(Request $request){
$city = $request['city'];
$area = DB::table('china_area')->where('parent_id','=',$city)->get()->toArray();
        return json_encode(['status' => 0, 'data' => $area]);
}

//地图
public function tapp(Request $request){
$dizhi = $request->input('dizhi');
$ar= file_get_contents("http://api.map.baidu.com/geocoding/v3/?address=".$dizhi."&output=json&ak=服务端密码");
$arr = json_decode($ar);
$data['lng']=$arr->result->location->lng;
$data['lat']=$arr->result->location->lat;
//        dd($data);
return ['data'=>$data];
}

标签：Laravel,function,dizhi,lat,ajax,联动,var,lng,data
来源： https://www.cnblogs.com/fsp69/p/13923330.html