thinkcmf 引用騰訊地圖

須要在騰訊地圖購買開發密鑰（key）

後臺

/**
 * 地址轉換爲座標
 */
public function search_address()
{ 
 $param = $this->request->param();
 $url = "https://apis.map.qq.com/ws/geocoder/v1/?key=3Z3BZ-INEK2-6C5UJ-CZK5O-FTVFT-NSBQ7&address=".$param['address'];
 $result = file_get_contents($url);
 exit($result);
}

/**
 * 地址轉換爲座標
 */
public function reverse_address()
{ 
 $param = $this->request->param();
 $url = "https://apis.map.qq.com/ws/geocoder/v1/? location=".$param['lnglat']."&key=3Z3BZ-INEK2-6C5UJ-CZK5O-FTVFT-NSBQ7&get_poi=1";
 // $url = "https://apis.map.qq.com/ws/geocoder/v1/?key=7LDBZ- CEA6R-64WWQ-W6BRY-GT4BZ-5HFWU&address=".$param['address'];
 $result = file_get_contents($url);
 exit($result);
}


視圖

<div class="form-group">
 <label class="col-sm-2 control-label"><span class="form-required">*</span>樓盤地址</label>
 <div class="col-md-6 col-sm-10">
 <div style="display: flex;">
 <input type="text" class="form-control" name="address" id="address" placeholder="請輸入樓盤地址">
 <a class="btn btn-primary" href="javascript:;" style="margin-left: 10px;" onclick="searchAddress()">搜索</a>
 <input type="hidden" class="form-control" id="lnglat" name="lnglat" placeholder="請輸入經緯度" >
 </div>
 <div id="container" style="margin-top:10px;width:600px;height:300px;"></div>
 </div>
</div>

JS部分

<script src="https://map.qq.com/api/gljs?v=1.exp&key=3Z3BZ-INEK2-6C5UJ-CZK5O-FTVFT-NSBQ7"></script>
<script> 
//定義地圖中心點座標
var center = new TMap.LatLng(39.984120, 116.307484)
//定義map變量，調用 TMap.Map() 構造函數建立地圖 
var map = new TMap.Map(document.getElementById('container'), { 
 center: center,//設置地圖中心點座標 
 zoom: 17, //設置地圖縮放級別 
 viewMode:'3D' 
});
let markerLayer = new TMap.MultiMarker({ 
 id: 'marker-layer', 
 map: map 
});
var clickHandler=function(evt){
 var lat = evt.latLng.getLat().toFixed(6);
 var lng = evt.latLng.getLng().toFixed(6);
 $("#lnglat").val(lat+","+lng);
 removeMarker("search_res");
 addMarker(new TMap.LatLng(lat,lng),"search_res");
 let url = "{:url('Resources/reverse_address')}";
 $.get(url,{lnglat:lat+","+lng},function(res){
 debugger;
 res = JSON.parse(res)
 if(res.status==0){
 $("#address").val(res.result.formatted_addresses.recommend );
 }
 });
}
map.on("click",clickHandler)
function addMarker(latLng, id) {
 markerLayer.add({
 id: id,
 position: latLng
 });
 let lng = latLng.lng
 let lat = latLng.lat
 map.setCenter(new TMap.LatLng(lat,lng)); // 座標爲天安門
}
//移除marker事件
function removeMarker(id) {
 markerLayer.remove(id)
}
function searchAddress(){
 let address = $("#address").val();
 let url = "{:url('Resources/search_address')}";
 $.get(url,{address:address},function(res){
 debugger;
 res = JSON.parse(res)
 if(res.status==0){
 let location = res.result.location
 $("#lnglat").val(location.lat+","+location.lng);
 removeMarker("search_res");
 addMarker(new TMap.LatLng(location.lat,location.lng),"searc h_res");
 }
 });
}
</script>