51 地图基本接口(三)

1. 51 map搜索接口说明

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

　　如果要搜索地图，则需要引入上面的js，该js可以进行地理位置搜索，如果 上海-上海马戏城

　　也可以进行周边查找

　　

　　如果我们要显示搜索出来的地图，我们还需要添加引用如下js

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

 

2. 51map 查找单个结果

　　

　　看如上效果图，上面的效果图是默认查找上海马戏城这个地理位置。我也可以查找其他城市的不同地理位置。下面是查找代码

代码

 1  < html >
 2       < head >
 3           < meta http - equiv = " Content-Type "  content = " text/html; charset=UTF-8 " >
 4           < title > Untitled Document < / title>
 5           < script language = " javascript "  src = " http://api.51ditu.com/js/maps.js " >
 6           < / script>
 7          
 8           < script language = " javascript "  src = " http://api.51ditu.com/js/search.js " >
 9           < / script>
10           < script language = " JavaScript " >
11               var  map,search;
12              
13               /* *
14               * 搜索方法(搜索一个结果)
15               * @param {Object} searchResult
16                */
17               function  showPoint(searchResult){
18                   if (searchResult.searchPoints.length > 0 ){
19                       var  poi = searchResult.searchPoints[ 0 ];
20                      alert(poi.name +   " \nNTU坐标: " +  poi.point);
21                      map.clearOverLays();
22                       var  point = new  LTPoint(poi.point[ 0 ],poi.point[ 1 ]);
23                      map.centerAndZoom(point, 0 );
24                       var  marker = new  LTMarker(point);
25                      map.addOverLay(marker);
26                      map.handleMouseScroll(); 
27                       var  name = poi.name;
28                      LTEvent.bind(marker, " click " ,marker, function (){ this .openInfoWinHtml(name)});
29                  } else {
30                      alert( " 没有搜索到结果 " );
31                  }
32              }
33              
34 
35 
36              
37               /* *
38               * 初始化对象
39                */
40               function  init(){
41                  map = new  LTMaps( " myMap " );
42                  map.addControl( new  LTStandMapControl());
43                  
44                  search = new  LTLocalSearch(showPoint);
45                  
46                   // search=new LTLocalSearch(showPoints);
47                  
48                  search.setCity( " 上海 " );    
49                   // search.areaNum=5;  //指定搜索结果返回的最多中心点匹配数目
50                   // search.radius=3000;//设置搜索半径范围
51                   // search.search('美食',new LTPoint(11636777,3990569));
52                  search.search( " 马戏城 " );
53                   // search.search("美食","马戏城");
54              }
55           < / script>
56       < / head>
57       < body onload = " init() " >
58          城市:   < input type = " text "  id = " city "  value = " 上海 "   onchange = " search.setCity(this.value) "/ >< / br >
59          地区:   < input type = " text "  id = " word "  value = " 马戏城 "/ >< / br >
60           < input type = " button "  value = " 搜索 "  onclick = " search.search(document.getElementById('word').value) "/ >
61           < br / ><br / >
62           < div id = " myMap "  style = " position:absolute;left:10px; width:400px; height:300px; " >< / div>
63           < div id = " results "  style = " position:absolute;left:450px; width:400px; height:300px; " >< / div>
64       < / body>
65  < / html>
66 

 

　　在页面加载的时候我们初始化搜索对象,并且默认搜索上海马戏城这个地理位置

　　search=new LTLocalSearch(showPoint); 这个是创建搜索对象，并且指定一个回调函数显示该地图

　　search.setCity("上海");    设置了搜索的城市

　　search.search("马戏城");  在上面设置的城市中搜索该地区。调用search 就进行了地图查找功能

3. 51map 查找多个结果

　　我们可以使用这个接口查找多个地理位置。其实查找一个地理位置是一种特殊的查找多个地址位置。查找方法与上面的代码大同小异。

代码

 1  /* *
 2               * 搜索多个结果
 3               * @param {Object} searchResult
 4                */
 5               function  showPoints(searchResult){
 6                  map.clearOverLays();
 7                  points = [];
 8                   var  html = "" ;
 9                   if (searchResult.count > 0 ){
10                       for  ( var  i  =   0 ; i  <  searchResult.count; i ++ ) {
11                           var  poi  =  searchResult.searchPoints[i];
12                           var  point  =   new  LTPoint(poi.point[ 0 ], poi.point[ 1 ]);
13                           var  marker  =   new  LTMarker(point);
14                          map.addOverLay(marker);
15                          marker.name  =  poi.name;
16                          LTEvent.bind(marker,  " click " , marker,  function (){
17                               this .openInfoWinHtml( this .name)
18                          });
19                          alert(poi.name);
20                          html +=  poi.id + " &nbsp;&nbsp;<a href=' " + poi.url + " ' target='_blank'> " + poi.name + " </a><br/> " ;
21                          points.push(point);
22                      }
23                      map.getBestMap(points);
24                      document.getElementById( " results " ).innerHTML = html;
25                  } else {
26                      alert( " 无搜索结果 " );
27                  }
28              }

该图是查找多个地点的效果图，特殊表明之处即为查找的地点

 

4.51map 周边查找

　对于周边查找也只需要修改查询参数就可以了

　 map=new LTMaps("myMap");
    map.addControl(new LTStandMapControl());
    //search=new LTLocalSearch(showPoint);
    search=new LTLocalSearch(showPoints);
    search.setCity("上海"); 
    //search.areaNum=5;  //指定搜索结果返回的最多中心点匹配数目
    //search.radius=3000;//设置搜索半径范围
    //search.search('美食',new LTPoint(11636777,3990569));
    search.search("美食","马戏城");

　　效果图如下:

　　

　　　对于查找地图，上面还有一些熟悉的设置在 注释的代码中都有解析说明。也可以查看51地图接口api文档