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>