搜索接口(Search API)

   功能  接口方式  使用方法  范例文档 类参考

功能

搜索接口(Search API)是我要地图网新推出的接口,利用该接口,您就可以轻松的实现本地搜索功能。通过调用Search API服务,您就可以进一步扩展您的地图接口(Maps API),开发出更加精彩的应用服务。

返回顶部

接口方式

JavaScript

返回顶部

使用方法

第一步:引入JS

<script language="javascript" src="http://api.51ditu.com/js/search.js"></script>

第二步:开始使用

简单的搜索

以下的一个范例演示了如何实现一个简单的搜索功能:在“北京”范围内搜索“灵图”,

<script language="javascript">

function showPoint(searchResult)

{

if(searchResult.searchPoints.length>0)//如果存在搜索结果

{

var poi=searchResult.searchPoints[0];//搜索结果中的第一项

alert(poi.name+'\nNTU坐标:'+poi.point);

}

else

{

alert('无结果');

}

}

var search=new LTLocalSearch(showPoint);

search.setCity('北京');

search.search('灵图');

</script>

查看示例

在地图上显示搜索结果

本范例展示如何将搜索结果显示到地图上,如果要实现该功能,你必须在页面上同时引用Maps API ,Maps API的引用如下:

<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>

代码示例:

<script language="javascript">

var map,search;

function showPoint(searchResult)

{

if(searchResult.count>0)//如果存在搜索结果

{

map.clearOverLays();

var poi=searchResult.searchPoints[0];//取出第一个搜索结果点

var point=new LTPoint(poi.point[0],poi.point[1]);//得到该点的坐标的LTPoint

map.centerAndZoom(point,0);

var marker=new LTMarker(point);//向地图上添加一个标记

map.addOverLay(marker);

var name=poi.name;

//标记点击的时候弹出信息

LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(name)});

}

else

{

alert('无结果');

}

}

function onLoad()

{

map=new LTMaps("mapDiv");

map.addControl(new LTStandMapControl());

search=new LTLocalSearch(showPoint);

search.setCity('北京');

search.search('灵图');

}

</script>

...

<body onload="onLoad()"/>

...

查看示例

使用多个搜索结果

本范例展示如何使用多个搜索结果

<script language="javascript">

var map,search,points;

function showPoint(searchResult)

{

if(searchResult.count>0)//如果存在搜索结果

{

map.clearOverLays();

points=[];

var html="";

for(var i=0;i<searchResult.count;i++)//依次将搜索结果显示到地图上

{

var poi=searchResult.searchPoints[i];

var point=new LTPoint(poi.point[0],poi.point[1]);

var marker=new LTMarker(point);

map.addOverLay(marker);

marker.name=poi.name;

LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(this.name)});

points.push(point);

//输出POI信息列表

html+=poi.id+'.<a href="'+poi.url+'" target="_blank">'+poi.name+'</a><br/>';

}

document.getElementById("resultDiv").innerHTML=html;

map.getBestMap(points);

}

else

{

alert('无结果');

}

}

function onLoad()

{

map=new LTMaps("mapDiv");

map.cityNameAndZoom("beijing",5);

map.addControl(new LTStandMapControl());

search=new LTLocalSearch(showPoint);

search.setCity('北京');

search.search('中关村');

}

</script>

...

<body onload="onLoad()"/>

查看示例

周边查找

本范例展示如何使用周边查找功能

search.setCity('北京');

search.search('美食','天安门');//在'天安门'的周边查找'美食'

查看示例

分页查找

本范例展示如何使用分页查找功能

<script language="javascript">

var map,search,points;

function showPoint(searchResult)

{

if(searchResult.count>0)//如果存在搜索结果

{

map.clearOverLays();

points=[];

var html="";

html+='共'+search.totalNumber+'条记录,分'+search.totalPage+'页,当前第'+searchResult.getPageIndex()+'页';//显示分页信息

for(var i=0;i<searchResult.count;i++)

{

var poi=searchResult.searchPoints[i];

var point=new LTPoint(poi.point[0],poi.point[1]);

var marker=new LTMarker(point);

map.addOverLay(marker);

marker.name=poi.name;

LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(this.name)});

points.push(point);

html+=poi.id+'.<a href="'+poi.url+'" target="_blank">'+poi.name+'</a><br/>';

}

document.getElementById("resultDiv").innerHTML=html;

map.getBestMap(points);

}

else

{

alert('无结果');

}

}

function onLoad()

{

map=new LTMaps("mapDiv");

map.cityNameAndZoom("beijing",5);

map.addControl(new LTStandMapControl());

search=new LTLocalSearch(showPoint);

search.setCity('北京');

search.pagecap=5;//设置每页显示多少条

search.search('美食','天安门',2);//指定从第二页开始搜索

}

</script>

...

<body onload="onLoad()"/>

...

查看示例

显示中心点

本范例展示如何获取和显示搜索的中心点匹配,搜索的过程之中,如果area(中心点)采用名称字符串搜索模式,可能会匹配到1个或多个中心点,可以在搜索结果之中获取这些点并显示在地图上。

<script language="javascript">

var map,search,points;

function showPoint(searchResult)

{

if(searchResult.count>0)//如果存在搜索结果

{

map.clearOverLays();

points=[];

var html="";

html+='共'+search.totalNumber+'条记录,分'+search.totalPage+'页,当前第'+searchResult.getPageIndex()+'页';

//在地图上显示中心点,中心点的匹配可能有多个

for(var i=0;i<searchResult.centerPoints.length;i++)

{

var poi=searchResult.centerPoints[i];

var point=new LTPoint(poi.point[0],poi.point[1]);

var icon=new LTIcon();//为中心点指定不同的图标

icon.setImageUrl("http://www.51ditu.com/ls/img/poi/centerPoi.gif");

var marker=new LTMarker(point,icon);

map.addOverLay(marker);

marker.name=poi.name;

LTEvent.bind(marker,"click",marker,function(){this.openInfoWinHtml(this.name)});

}

for(var i=0;i'+poi.name+'';

}

document.getElementById("resultDiv").innerHTML=html;

map.getBestMap(points);

}

else

{

alert('无结果');

}

}

function onLoad()

{

map=new LTMaps("mapDiv");

map.cityNameAndZoom("beijing",5);

map.addControl(new LTStandMapControl());

search=new LTLocalSearch(showPoint);

search.setCity('北京');

search.areaNum=5;//指定搜索结果返回的最多中心点匹配数目

search.search('美食','灵图');

}

</script>

...

<body onload="onLoad()"/>

查看示例

地图点查找

本范例展示如何通过地图上的任意一点(LTPoint)进行周边查找

search.radius=3000;//设置搜索半径范围

search.search('美食',new LTPoint(11636777,3990569));//以指定的中心点进行搜索



返回顶部