三级联动请看: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];
}