搜索 金牛区欢乐谷
发现返回的类型为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>