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 查找单个结果
看如上效果图，上面的效果图是默认查找上海马戏城这个地理位置。我也可以查找其他城市的不同地理位置。下面是查找代码
代码
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 查找多个结果
我们可以使用这个接口查找多个地理位置。其实查找一个地理位置是一种特殊的查找多个地址位置。查找方法与上面的代码大同小异。
代码
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+" <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文档
51 地图基本接口(三)相关推荐
- 51 地图基本接口(二)
1. 51 map 地图接口 地图接口是我们用的非常多的一个接口,通常用于显示地图的地理位置和突出显示某个地理位置.当然这里只是一个普通的显示显示地图,我们还可以通过搜索来确定地理位置,这将在后面的文 ...
- 通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息
通过腾讯地图.高德地图.百度地图开发接口获取坐标对应的周边相关信息 更新: 以前出于好意暴露了个人的KEY,现已被烂用.为不影响您的业务,请使用我的KEY的朋友去申请自己的KEY,我的KEY将在不久后 ...
- Android 百度地图开发（三）--- 实现比例尺功能和替换自带的缩放组件
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/11821523 貌似有些天没有写博客了,前段时间在忙找工作的事,面试了几家公司,表示反响 ...
- 百度地图和51地图API应用开发
最近因为工作需要,领导要我将51地图API开发的一个应用迁移到百度地图,或者说用百度地图API进行重写,实现同样的功能.我先是把现有的这个51地图的应用了解了一下,然后就试着用百度地图做一些demo, ...
- 微信打通腾讯地图 提供地图API接口
据悉,腾讯地图与微信全面打通并且开放后,可以向第三方微信公众账号提供一套基于地理位置的综合解决方案,包括录入网点位置.向用户发送位置.帮用户计算达到线路.查看街景等.届时,用户将可以通过微信公众账号直 ...
- Angular 调用导入百度地图API接口
Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...
- 快递鸟物流查询轨迹地图API接口案例代码java
一.接口描述/说明 1.即时查询(轨迹地图版)接口 (1)查询接口支持按照运单号查询(单个/批量查询). (2)接口需要指定快递单号的快递公司编码,格式不对或则编码错误都会返失败的信息. 如:EMS物 ...
- 地图定义一个中间不动标注_高精度地图制作（三）
高精度地图主要用于无人驾驶路径规划,还可以应用于无人驾驶定位,ROI区域过滤等.接下来我们主要来看如何制作高精度地图. 高精度地图制作流程 高精度地图的制作过程分为4个步骤: 地图采集 点云地图制作 ...
- 几种常用的医院地图API接口地址—百度地图
几种常用的医院地图API接口地址,医疗网站上经常使用的来院路线地图,调用第三方平台提供的地图接口,下面是医疗模板库为大家收集整理的几种常用的地图API接口. 1.百度地图: 网址:http://api ...
最新文章
- MyBatis启动：MapperStatement创建
- 独家 | 请停止使用浏览器过程中的不安全行为（附链接）
- kill Signal
- python做圆柱绕流_圆柱绕流
- SAP UI5 应用开发教程之十二 - 使用 CSS 类对 UI 进行进一步美化
- JavaScript范围介绍
- php mysql安装配置_转载：PHP,MySQL的安装与配置
- 地铁19号线首段盾构区间双线贯通
- 如何使用AxureShare+Axure RP 8.0创建团队项目，实现团队协同
- 简单盘点游戏开发引擎
- 个体工商户营业执照在网上如何年检？
- 无迹卡尔曼滤波UKF_代码及调参(2)
- 视频帧数（图片）和音频提取及保存方法图片合成视频方法---ffmpeg
- 在Proteus 中51单片机常用器件名称和图片
- 比较好的业界新闻网站
- 计算机保研夏令营英语面试,双非计算机保研 夏令营经验
- 企业IT移动化方案：微信+OA！
- 数字城市发展，哪些技术可以深度应用
- vue3项目引入animate.css教程
- 2022二建建筑实务考试综合测试题目与答案