修复腾讯地图qq.maps.SearchService失效的解决方案

狒狒伯尼

已于 2024-08-06 16:54:36 修改

阅读量512

点赞数 5

文章标签： javascript

于 2024-08-06 16:53:49 首次发布

本文链接：https://blog.csdn.net/PingGuoAiShangMaiD/article/details/140960238

版权

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>