怎么实现附近人搜索功能

随着电子地图的不断普及，大家应该都使用过周边搜索的功能吧。那这个功能是怎么实现的呢？下面我就来分享下功能实现的代码。如果有疑问，欢迎来讨论。

先看下效果图：

以下是实现的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>返回上海市东方明珠周边的餐厅和银行检索结果，并展示在地图上</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<script type="text/javascript" src="http://211.136.131.242:8087/api/map.js?key=您的密钥"></script>

</head>

<body>

<div id="div_map" ></div>
<div id="xxx"></div>
<script type="text/javascript">
//var xxx=1111;

var map=null;

map=new STMapObj("div_map");
map.locateMap(new STMapPoint(121.499712,31.239701),2);

map.setZoomCompVisible(true);
map.setScaleCompVisible(true);
//示例银行地址，餐厅地址
var str3 = '{"yh": [{"yh":"交通银行,121.50385869513702,31.23947166948102"},{"yh":"深圳银行,121.50237811576078,31.23971017320918"},{"yh":"中国银行,121.50338662635037,31.238627728376645"}]}';
var str4 = '{"ct": [{"ct":"味千,121.50106919776154,31.239627614294512"},{"ct":"粥天,121.49844063292694,31.240269737284546"},{"ct":"赛百味,121.49940622817232,31.238912100678003"}]}';
var shuzu=new Array();
shuzu[0]="银行";
shuzu[1]="餐厅";
shuzu[2]="影院";
shuzu[3]="宾馆";

test("银行","餐厅");//简单的示例代码
function test(a,b){
for(var j=0;j<shuzu.length;j++){
//alert(shuzu[j])
if(a==shuzu[j]){
var obj1=eval('(' + str3 + ')');
var len=obj1.yh.length;

for (var i=0;i<len;i++)

{
var gongyuan=obj1.yh[i].yh;

var str= new Array();
str=gongyuan.split(",");
var poly = new STMapMarker();
poly.id="testline61"+i; //【必选】对象 id
poly.point=new STMapPoint(str[1],str[2]); //【必选】经纬度坐标 STMapPoint 类型
poly.img="../img/carAPI.png"; //【必选】对象的图片地址 url
poly.infowin=false; //【可选】是否点击显示信息窗口，默认为 true。
poly.moveable = false; //是否可以拖动
map.addOverlay(poly);
}
}
if(b==shuzu[j]){
var obj1=eval('(' + str4+ ')');
var len=obj1.ct.length;
for (var i=0;i<len;i++)
{
var gongyuan=obj1.ct[i].ct;

var str= new Array();
str=gongyuan.split(",");
var poly = new STMapMarker();
poly.id="testline62"+i; //【必选】对象 id
poly.point=new STMapPoint(str[1],str[2]); //【必选】经纬度坐标 STMapPoint 类型
poly.img="../img/carAPI.png"; //【必选】对象的图片地址 url
poly.infowin=false; //【可选】是否点击显示信息窗口，默认为 true。
poly.moveable = false; //是否可以拖动
map.addOverlay(poly);
}

}
}

}

</script>
<div >
<script type="text/javascript">
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_1000501913'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/z_stat.php%3Fid%3D1000501913' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
</body>

</html>

posted @ 2014-11-24 12:21 六楼全球阅读(263) 评论(0) 收藏举报

刷新页面返回顶部

中安谈谈

怎么实现附近人搜索功能

公告