<!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;
}
#container {
min-width: 603px;
min-height: 767px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
<script>
var searchService, map, markers = [];
var init = function() {
var center = new qq.maps.LatLng(39.936273, 116.44004334);
map = new qq.maps.Map(document.getElementById('container'), {
center: center,
zoom: 13
});
//设置圆形
new qq.maps.Circle({
center: new qq.maps.LatLng(39.936273, 116.44004334),
radius: 2000,
map: map
});
var latlngBounds = new qq.maps.LatLngBounds();
//调用Poi检索类
searchService = new qq.maps.SearchService({
complete: function(results) {
var pois = results.detail.pois;
for(var i = 0, l = pois.length; i < l; i++) {
var poi = pois[i];
latlngBounds.extend(poi.latLng);
var marker = new qq.maps.Marker({
map: map,
position: poi.latLng
});
marker.setTitle(i + 1);
markers.push(marker);
}
map.fitBounds(latlngBounds);
}
});
// 创建街景
// pano = new qq.maps.Panorama(document.getElementById('pano_container'), {
// "pano": '10011001120131111029111' //此处街景id在 https://lbs.qq.com/tool/streetview/index.html 处可取得
// });
}
//调用poi类信接口
function searchKeyword() {
var keyword = document.getElementById("keyword").value;
region = new qq.maps.LatLng(39.936273, 116.44004334);
searchService.setPageCapacity(5);
searchService.searchNearBy(keyword, region, 2000); //根据中心点坐标、半径和关键字进行周边检索。
}
</script>
</head>
<body onload="init()">
<div>
<input id="keyword" type="textbox" value="酒店">
<input type="button" value="search" onclick="searchKeyword()">
</div>
<div id="container"></div>
<p>输入关键词，点击search查寻，查寻范围这一个圆形区域。</p>
</body>
</html>
网友评论