分享一个怎么实现周边搜索功能的方法

笛途 发布于 2014/11/24 10:46
阅读 519
收藏 6

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

先看下效果图:

以下是实现的代码:

<!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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="http://211.136.131.242:8087/api/map.js?key=您的密钥"></script>

  </head>
  
  <body>
  
  <div id="div_map" style="width:100%;height:100%; float: left;"></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 style="display: none">
<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>


加载中
0
朱宏青
朱宏青

我觉得类似这样的分享应该按以下步骤进行:

1.分享的主题(内容)是什么.

2.它解决了什么问题.

3.解决的思路是什么.以及中途可能的坑.

4.具体实现

5.总结

0
睡得
睡得
这类的 电子地图应用我也经常看到。这家 上海为卓信息科技我之前也看到过,做的项目很多都是跟政府部门相关的。还有一些预案系统。在地图行业还是做的不错的。目前企业地图应用比较的广泛。为卓科技主要项 GIS 运行系统主要 包括:民政地理信息查询系统、柳州市政府GIS 系统、上海闵行派出所 监狱监控系统、交通局路况地图查询系统、嘉定区交通运输信息系统、农业银行上海分行ATM 网点系统、 瑞麦地产楼盘销售GIS系统、数字展览馆、 LBS 应用聚合门户平台、车联网平台、物联网平台、天行者车载导航平台 等GIS 开发应用。
返回顶部
顶部