由于要批量将物理地址转换为经纬度坐标,所以在度娘那找了一下再优化了一下,单个获取实现了。
批量还远吗?批量的就让自己自由发挥吧!
下面记得引入jquery ,还有tp5我是开启路由的,就是这两段ajax的url
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=6LLBZ-QMLCX-HNA4L-T3ADN-4O3V5-BFFLB"></script>
<script src="/public/static/js/jquery-1.8.3.min.js"></script>
<title>物理地址转换成经纬度(map)</title>
<style>
body {font: 12px/16px Verdana, Helvetica, Arial, sans-serif;}
.dv_map{text-align: center;}
.mid_text{width:360px;}
.mid_btn{color:#0f77ea;cursor: pointer;transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1) 0s;}
.mid_btn:hover{color:#fff;background: #0f77ea;transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1) 0s;}
.mid_btn:active{color:#ffc;background: #0000FF;transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1) 0s;}
.ipt{display: inline-block;padding:5px 9px;border-radius: 6px;outline: 0;border: 1px solid #bcbcbc;}
</style>
</head>
<body>
<div class="dv_map">
<!-- <input class="ipt mid_text" id="getAddress" type="text" name="location" value="" />-->
<input class="ipt mid_btn" id="getBtn" type="button" value="获取坐标" />
<br>
<div class="latlng"></div>
<input class="ipt mid_tet" type="hidden" name="latlng" value="" readonly />
</div>
<script>
var geocoder= null;
$("#getBtn").click(function(){
//let address = $("#getAddress").val();
$.ajax({
type: 'get',
url: 'setAddress',
dataType: 'json',
success: function (data) {
for(var i = 0; i < data.length; i++){
//console.log(i+data[i]);
if(data[i] !== ''){
geocoder = new qq.maps.Geocoder();
geocoder.getLocation(data[i]); //对指定地址进行解析
//设置服务请求成功的回调函数
geocoder.setComplete(function(result) {
//console.log(result.detail.location);
let lat = result.detail.location.lat; //经度
let lng = result.detail.location.lng; //纬度
//$('.latlng').html("lat: "+lat+" lng: "+lng);
$.ajax({
type: 'get',
url: 'getAddress',
data: {'lat': lat, 'lng': lng},
dataType: 'json',
success: function (res) {
console.log(res)
},
error:function () {
alert('请联系管理员!')
}
});
});
//若服务请求失败,则运行以下函数
geocoder.setError(function() {
alert("抱歉,出错了");
});
}else{
alert('地址为空? 请输入地址!');
}
}
},
error:function () {
alert('请联系管理员!')
}
});
});
</script>
</body>
</html>
controller -> 类 -> 方法(两个接口):
//设置地址
public function setAddress(){
$da = array( '深圳市特区报社报业大厦', '深圳市平安中心', '深圳市购物公园', '深圳市会展中心');
return $da;
}
//获取经纬度坐标
public function getAddress(){
$lat = input('lat');
$lng = input('lng');
if($lat == '' && $lng == ''){
return '参数为空的!';
}else{
return $lat.' '.$lng;
}
}