腾讯地图定位

最新推荐文章于 2024-01-11 14:26:00 发布

一个假的前端男

最新推荐文章于 2024-01-11 14:26:00 发布

阅读量557

点赞数

分类专栏：地图

本文链接：https://blog.csdn.net/IT_iosers/article/details/118112636

版权

地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用QQ地图API进行关键词检索和显示检索结果。通过设置搜索服务、指定城市和地区，实现对特定区域内如'欢乐谷'的搜索。当搜索'金牛区欢乐谷'时，返回结果类型为CITY_LIST，示例代码中展示了如何处理这种情况，并在地图上展示搜索到的POI信息。

摘要由CSDN通过智能技术生成

在这里插入图片描述

搜索 金牛区欢乐谷 发现返回的类型为CITY_LIST

后根据 官方代码 发现问题 未设置相对应的城市 或地区
this.searchService.setLocation(this.region);

在这里插入图片描述

搜索 金牛区欢乐谷 发现返回的类型为CITY_LIST

// 官方案例

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; 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" />
    <title>普通关键字检索</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p {
            width: 603px;
            padding-top: 3px;
            margin-top: 10px;
            overflow: hidden;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
 
</head>
 
<body onload="init()">
    <script>
        var searchService, markers = [];
        var init = function() {
            var center = new qq.maps.LatLng(39.916527, 116.397128);
            var map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 13
            });
 
            //设置Poi检索服务，用于本地检索、周边检索
            searchService = new qq.maps.SearchService({
                //检索成功的回调函数
                complete: function(results) {
                    //设置回调函数参数
                    var pois = results.detail.pois;
                    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点
                        latlngBounds.extend(poi.latLng);
 
                        (function(n) {
                            var marker = new qq.maps.Marker({
                                map: map
                            });
                            marker.setPosition(pois[n].latLng);
 
                            marker.setTitle(i + 1);
                            markers.push(marker);
 
 
                            qq.maps.event.addListener(marker, 'click', function() {
                                infoWin.open();
                                infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为：' +
                                    pois[n].id + '，POI的名称为：' + pois[n].name + '，POI的地址为：' + pois[n].address + '，POI的类型为：' + pois[n].type + '</div>');
                                infoWin.setPosition(pois[n].latLng);
                            });
                        })(i);
                    }
                    //调整地图视野
                    map.fitBounds(latlngBounds);
                },
                //若服务请求失败，则运行以下函数
                error: function() {
                    alert("出错了。");
                }
            });
 
        }
 
         //清除地图上的marker
            function clearOverlays(overlays) {
                var overlay;
                while (overlay = overlays.pop()) {
                    overlay.setMap(null);
                }
            }
            //设置搜索的范围和关键字等属性
            function searchKeyword() {
                var keyword = document.getElementById("keyword").value;
                var region = document.getElementById("region").value;
                var pageIndex = parseInt(document.getElementById("pageIndex").value);
                var pageCapacity = parseInt(document.getElementById("pageCapacity").value);
                clearOverlays(markers);
                //根据输入的城市设置搜索范围
                searchService.setLocation(region);
                //设置搜索页码
                searchService.setPageIndex(pageIndex);
                //设置每页的结果数
                searchService.setPageCapacity(pageCapacity);
                //根据输入的关键字在搜索范围内检索
                searchService.search(keyword);
                //根据输入的关键字在圆形范围内检索
                //var region = new qq.maps.LatLng(39.916527,116.397128);
                //searchService.searchNearBy(keyword, region , 2000);
                //根据输入的关键字在矩形范围内检索
                //region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
                //searchService.searchInBounds(keyword, region);
 
            }
    </script>
    <div>
        <input id="keyword" type="textbox" value="酒店">
        <input id="region" type="textbox" value="北京">页码:
        <input id="pageIndex" type="textbox" value="0" style="width:30px">每页结果数:
        <input id="pageCapacity" type="textbox" value="5" style="width:30px">
        <input type="button" value="搜索" onclick="searchKeyword()">
    </div>
    <div style="width:603px;height:300px" id="container"></div>
    <p>在两个文本框中分别输入关键词和查找的范围，点击搜索按钮进行查找，点击Marker可获取POI属性。</p>
</body>
 
</html>

在这里插入图片描述

一个假的前端男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
腾讯地图定位

搜索金牛区欢乐谷发现返回的类型为CITY_LIST后根据官方代码发现问题未设置相对应的城市或地区this.searchService.setLocation(this.region);搜索金牛区欢乐谷发现返回的类型为CITY_LIST// 官方案例<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charse.
复制链接

扫一扫