php后端新建地图地点检索方法
namespace Seller\Controller;
use Think\Controller;
class CommonController extends Controller{
public $uniacid;
public $apiurl = 'https://apis.map.qq.com/ws/';
private $key;
protected function _initialize(){
$this->key = '11111-WAB3W-JITRG-OE7GY-R2753-11111';
}
//地址检索
/**
* apidoc:https://lbs.qq.com/service/webService/webServiceGuide/webServiceSearch
* $keyword 关键字,
* $location 经纬度数组,['lat'=>35.1232,'lng'=118.23]
* $range 检索范围,默认1公里内
* $auto_extend 是否自动扩大范围 默认0 不扩大,1扩大
* $get_subpois 是否返回子地点,如大厦停车场、出入口等取值, 0 [默认]不返回 1返回
* $filter 筛选过滤
---1. 指定分类筛选,语句格式为:
---category=分类名1,分类名2
---分类词数量建议不超过5个,支持设置分类编码(支持的分类请参考:POI分类表)
---2. 排除指定分类,语句格式为:
---category<>分类名1,分类名2
---分类词数量建议不超过5个,支持设置分类编码(支持的分类请参考:POI分类表)
---3. 筛选有电话的地点:tel<>null
* $orderby 排序,支持按距离由近到远排序,取值:_distance
* @param array $ext_param 扩展参数[例如地图接口中的:page_index,page_size,output,callback等,如需要可自行添加]
*/
public function searchNearbyPlace($keyword='',$location=[],$range=1000,$auto_extend=0,$get_subpois=0,$filter='',$orderby='',$ext_param=[]){
$url = $this->apiurl . 'place/v1/search?key='.$this->key;
if(empty($keyword) || empty($location)){
return ['status'=>0,'msg'=>'参数错误'];
}
$boundary = '';
if($location && $location['lat'] && $location['lng']){
$boundary = "nearby({$location['lat']},{$location['lng']},{$range},{$auto_extend})";
}
if(empty($boundary)){
return ['status'=>0,'msg'=>'参数错误[boundary]'];;
}
$url .="&keyword=".urlencode($keyword).'&boundary='.$boundary.'&get_subpois='.$get_subpois.'&orderby='.$orderby;
if($filter){
$url .= '&filter='.urlencode($filter);
}
$res = json_decode(file_get_contents($url), true);
if($res && $res['status']===0){
return ['status'=>1,'msg'=>'','data'=>$res['data']];
}else{
\think\facade\Log::write([
'file'=>__FILE__.__LINE__,
'status'=>$res['status'],
'message'=>$res['message']
]);
}
return ['status'=>0,'msg'=>'failed'];
}
}
控制器调用common的方法返回给页面
/**
* 地图搜索
*/
public function search_formmap(){
$keyword = I('post.keywords');
$lat = I('post.lat');
$lng = I('post.lng');
if(empty($keyword) || empty($lat) || empty($lng)){
echo json_encode(['status' => 0, 'msg' => '参数错误']);
die();
}
$results = $this->searchNearbyPlace($keyword,['lat'=>$lat,'lng'=>$lng],1000,1);
if($results['status'] == 1){
echo json_encode(['status' => 1, 'data' => $results['data']]);
}else{
echo json_encode(['status' => 0, 'msg' => '请求失败']);
}
die();
}
前端调用
<script>
var map, searchService, marker = null, markers = [], infoWin = null;
var initMap = function () {
<?php if( !empty($item['lat']) ){ ?>
var center = new qq.maps.LatLng({$item['lat']},{$item['lon']});
<?php }else{?>
var center = new qq.maps.LatLng(39.916527, 116.397128);
<?php }?>
map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 13
});
var marker = new qq.maps.Marker({ position:center, map: map});
markers.push(marker);
var scaleControl = new qq.maps.ScaleControl({
align: qq.maps.ALIGN.BOTTOM_LEFT,
margin: qq.maps.Size(85, 15),
map: map
});
//调用Poi检索类
searchService = new qq.maps.SearchService({
//检索成功的回调函数
complete: function (results) {
//设置回调函数参数
var pois = results.detail.pois;
infoWin = new qq.maps.InfoWindow({
map: map
});
var latlngBounds = new qq.maps.LatLngBounds();
for (var i = 0, l = pois.length; i < l; i++) {
var poi = pois[i];
//扩展边界范围,用来包含搜索到的Poi点
latlngBounds.extend(poi.latLng);
(function (n) {
var marker = new qq.maps.Marker({
map: map
});
marker.setPosition(pois[n].latLng);
markers.push(marker);
qq.maps.event.addListener(marker, 'click', function () {
infoWin.open();
infoWin.setContent('<div style = "width:200px;padding:10px 0;">' + pois[n].address + '<div class="map-import-btn"><input type="button" class="btn btn-xs btn-primary" value="导入经纬度" onclick="chooseShopLoc(this);" address=' + pois[n].address + ' lat =' + pois[n].latLng.getLat() + ' lng =' + pois[n].latLng.getLng() + ' /></div></div>');
infoWin.setPosition(pois[n].latLng);
});
})(i);
}
//调整地图视野
map.fitBounds(latlngBounds);
},
//若服务请求失败,则运行以下函数
error: function () {
alert("很抱歉,未搜索到此地址,请重新输入!");
}
});
}
function getSelectArea() {
var storeArr = [];
var s_province = $('#sel-provance').val();
var s_city = $('#sel-city').val();
var s_area = $('#sel-area').val();
var s_street = $('#sel-street').val();
if('请选择省份' != s_province)
{
storeArr.push(s_province);
}
if('请选择城市' != s_city)
{
storeArr.push(s_city);
}
if('请选择区域' != s_area)
{
storeArr.push(s_area);
}
if('请选择街道/镇' != s_street && '' != s_street)
{
storeArr.push(s_street);
}
$("#area-selector select").each(function (i) {
if ($(this).find("option:selected").text() != '请选择') {
storeArr.push($(this).find("option:selected").text());
}
});
return storeArr;
}
//搜索地图
function searchMap(address) {
var currentDomain = window.location.protocol + "//" + window.location.host;
var wd = $("#lon").val();
var jd = $("#lat").val();
$.post(currentDomain + "/seller.php?s=/index/search_formmap", {keywords:address,lat:39.916527,lng:116.397128},function(results){
var results = JSON.parse(results);
if(results.status == 1) {
var pois = results.data;
if(pois.length == 0){
layer.msg("未找到相关地址!");
return ;
}
var infoWin = new qq.maps.InfoWindow({
map: map
});
var latlngBounds = new qq.maps.LatLngBounds();
for (var i = 0, l = pois.length; i < l; i++) {
var poi = pois[i];
//扩展边界范围,用来包含搜索到的Poi点
var location = new qq.maps.LatLng(poi.location.lat, poi.location.lng)
latlngBounds.extend(location);
(function(n) {
var LatLng = new qq.maps.LatLng(pois[n].location.lat,pois[n].location.lng)
var marker = new qq.maps.Marker({
map: map,
position: LatLng
});
marker.setTitle(i + 1);
markers.push(marker);
qq.maps.event.addListener(marker, 'click', function() {
infoWin.setContent('<div style = "width:200px;padding:10px 0;">' + pois[n].address + '<div class="map-import-btn"><input type="button" class="btn btn-xs btn-primary" value="导入经纬度" onclick="chooseShopLoc(this);" address=' + pois[n].address + ' lat =' + pois[n].location.lat + ' lng =' + pois[n].location.lng + ' /></div></div>');
infoWin.setPosition(LatLng);
$("#lon").val(pois[n].location.lng);
$("#lat").val(pois[n].location.lat);
$("#address").val(pois[n].title);
});
})(i);
}
//调整地图视野
map.fitBounds(latlngBounds);
$("#lon").val(pois[0].location.lng);
$("#lat").val(pois[0].location.lat);
}else{
layer.msg(results.msg);
}
})
}
//查询社区信息
function chooseShopLoc(t) {
var address = $(t).attr("address");
var storeAreaArr = getSelectArea();
for (var i = 3; i >= 0; i--) {
if (i == 0)
{
address = address.replace(storeAreaArr[0] + "市", '');
}
address = address.replace(storeAreaArr[i], '');
}
var lat = $(t).attr("lat");
var lng = $(t).attr("lng");
this.clearMarkers();
var position = new qq.maps.LatLng(lat, lng);
marker = new qq.maps.Marker({
map: map,
position: position,
draggable: true
});
map.panTo(position);
map.zoomTo(18);
$("#lon").val(lng);
$("#lat").val(lat);
qq.maps.event.addListener(marker, 'dragend', function () {
if (marker.getPosition()) {
$("#lon").val(marker.getPosition().getLng());
$("#lat").val(marker.getPosition().getLat());
}
});
if (infoWin) {
infoWin.close();
}
$("#map_des").hide();
}
删除所有标记
function clearMarkers() {
if (markers) {
for (i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
}
}
//搜索地址,这里需要判断是否选择了省市区
function getResult() {
if ($.trim($("#sel-provance").val()) == '请选择省份') {
layer.msg('请选择正确的省市区街道',{icon: 1,time: 2000});
return;
}
if ($("#AddressId").val() <= 0) {
// $.dialog.tips("请先选择店铺地址");
return;
}
if ($.trim($("#address").val()).length == 0) {
//tip.msgbox.err('请先输入详细地址');
layer.msg('请先输入详细地址',{icon: 1,time: 2000});
return;
}
if (marker != null) marker.setMap(null);
clearMarkers();
if (infoWin) {
infoWin.close();
}
var storeArr = getSelectArea();
var regions = storeArr[0] + storeArr[1] + storeArr[2];
var regionText = storeArr.join(',');
var poiText = regions + $.trim($("#address").val());
searchMap(poiText);
//searchService.setLocation(storeArr[1]);
//searchService.search(poiText);
//$("#map_des").show();
}
</script>
<script language='javascript'>
$(function(){
cascdeInit("1","1","{$item['province_name']}","{$item['city_name']}","{$item['area_name']}","{$item['country_name']}");
initMap();//初始化门店地图
});
require(['bootstrap'],function(){
$('#myTab a').click(function (e) {
e.preventDefault();
$('#tab').val( $(this).attr('href'));
$(this).tab('show');
})
});
function showbacktype(type){
$('.backtype').hide();
$('.backtype' + type).show();
}
$(function(){
})
</script>