标题: 我要地图接口应用举例
作者: dnawo
日期: 2007-03-21 11:16 AM
分类: 脚本语言
内容: 我要地图(http://www.51ditu.com/)是北京灵图软件技术有限公司自主研发而成，它拥有自己的数据和引擎，并在此基础上提供了一系列的应用接口，以满足网站类(B/S结构)和非网站类(C/S结构)的应用。
一、接口分类
按调用方式：iframe、Javascript、Http+Xml和WebService
按功能：地图频道接口、地图接口、标注接口、搜索接口、导航接口、公交接口和位置描述接口
二、接口应用
㈠地图频道接口(接口方式:iframe)
1.使用方法
①利用城市代码和比例级别
复制内容到剪贴板 程序代码<iframe src="http://api.51ditu.com/iframe/newmapwindow.html?city=福州&zoom=4" height="500" width="700" SCROLLING="no"></iframe>
②利用中心点和比例级别
复制内容到剪贴板 程序代码<iframe src="http://api.51ditu.com/iframe/newmapwindow.html?lng=11930797&lat=2608699&zoom=4&name=福州东街" height="500" width="700" SCROLLING="no"></iframe>
2.参数列表
city : 用城市的名称或拼音表示
lon : 经度
lat : 纬度
name : 中心点名称（要在跨浏览器之中支持，最好对汉字进行URL编码）
zoom : 比例尺级别(12 - 0级逐渐详细，0级为最详细的地图可精确到街道)
theme: 主题新式，目前支持blue、darkslateblue、golden、gray、green、purple、red、yellow八种颜色主题
showsmc: 显示导航控件类型。0为不显示，1为标准型，2为简单型，3为迷你型
showovm: 是否显示鹰眼地图。0为不显示，1为显示
showetd: 是否显示地图扩展功能模块，目前有地图浏览，本地搜索，公交查询，驾驶导航4个功能模块。0为不显示，1为显示在地图左边，2为显示在地图右边
topic: 加载哪些功能模块，以及显示的顺序，由n(nav)、b(公交查询模块)、s(本地搜索模块)、p(地图浏览模块)四个字母中的一个或多个按照选定的顺序组合而成
ettopic: 默认激活psbn中哪一个功能模块。
showtools: 是否显示辅助工具栏,即测距、测面、保存、打印地图等工具栏按钮。0 为不显示，1 为显示
showrgeo: 是否在拖动地图时实时的显示地图中心位置的行政区划信息。0 为不显示，1 为显示
lng: 中心点经度
lat: 中心点纬度
zoom: 默认打开地图的缩放等级
city: 指定默认打开的城市，如果没有指定中心点坐标，将会自动定位到该城市中心，如果该城市支持搜索，则会被设置为默认的搜索城市,可以使用名称(例如 北京)、区号(例如 010 )、拼音(例如 beijing )等多种方式来指定城市
name: 指定中心点处标记的名称
addr: 指定中心点处标记的详细地址
site: 指定中心点处标记的网址
㈡地图接口(接口方式:Javascript)
1.使用方法
①利用城市代码和比例级别
复制内容到剪贴板 程序代码<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>
<script language="javascript">
var maps = new LTMaps("myMap");
maps.cityNameAndZoom("fuzhou",4);
</script>
②利用中心点和比例级别
复制内容到剪贴板 程序代码<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<div ii敶"myMap" style="position:relative; width:400px; height:300px;"></div>
<script language="javascript">
var maps = new LTMaps("myMap");
maps.centerAndZoom(new LTPoint(11930797,2608699),4);
</script>
2.添加控件
①标准缩放控件(LTStandMapControl和LTSmallMapControl)
复制内容到剪贴板 程序代码var control = new LTStandMapControl();
maps.addControl(control);
②拉框放大控件(LTZoomInControl)
复制内容到剪贴板 程序代码var control = new LTZoomInControl();
maps.addControl(control);
③拉框查找控件(LTZoomSearchControl)
复制内容到剪贴板 程序代码var control = new LTZoomSearchControl();
maps.addControl(control);
function doit(){
var bounds = control.getBoundsLatLng();
var xmax = bounds.getXmax();
var ymax = bounds.getYmax();
var xmin = bounds.getXmin();
var ymin = bounds.getYmin();
alert("Max-X:"+xmax+"\nMax-Y:"+ymax+"\nMin-X:"+xmin+"\nMin-Y:"+ymin);
}
LTEvent.addListener(control,"mouseup",doit);
④测距离控件(LTPolyLineControl)
复制内容到剪贴板 程序代码var control = new LTPolyLineControl();
maps.addControl(control);
control.setTop(10);
⑤测面积控件(LTPolygonControl)
复制内容到剪贴板 程序代码var control = new LTPolygonControl();
maps.addControl(control);
control.setTop(10);
⑥标注控件(LTMarkControl)
复制内容到剪贴板 程序代码var control = new LTMarkControl();
maps.addControl(control);
function getPoi(){
var poi = control.getMarkControlPoint();
alert("纬度："+poi.getLatitude()+"\n经度："+poi.getLongitude());
}
LTEvent.addListener(control,"mouseup",getPoi);
⑦自定义控件
maps.moveToCenter(new LTPoint(m,n)); //移动到中心(m,n)
maps.mapMoveToUp(n); //上移n
maps.mapMoveToDown(n); //下移n
maps.mapMoveToLeft(n); //左移n
maps.mapMoveToRight(n); //右移n
maps.zoomIn(); //放大
maps.zoomOut(); //缩小
maps.zoomTo(n); //缩放级别
maps.handleKeyboard(); //键盘操作支持
maps.handleMouseScroll(); //鼠标滚轮支持
3.样式修改
①依据经纬度添加标记
复制内容到剪贴板 程序代码var marker1 = new LTMarker(new LTPoint(11930797,2608699));
maps.addOverLay(marker1);
②修改标记的图标和大小
复制内容到剪贴板 程序代码var icon = new LTIcon();
icon.setImageUrl("http://www.51ditu.com/maps/img/wwwlogob.gif");
icon.setWidth(100);
icon.setHeight(50);
var marker1 = new LTMarker(new LTPoint(11930797,2608699),icon);
maps.addOverLay(marker1);
③给标记添加事件和事件响应
复制内容到剪贴板 程序代码var marker1 = new LTMarker(new LTPoint(11930797,2608699));
maps.addOverLay(marker1);
function doit(){
alert( "Hello World!" );
}
LTEvent.addListener(marker1,"click",doit);
④给标记添加信息窗口
复制内容到剪贴板 程序代码var marker1 = new LTMarker(new LTPoint(11930797,2608699));
maps.addOverLay(marker1);
function doit(){
marker1.openInfoWinHtml("Hello World!"); //支持HTML
}
LTEvent.addListener(marker1,"mouseover",doit);
⑤在标记的信息窗口中打开一个页面
复制内容到剪贴板 程序代码var marker1 = new LTMarker(new LTPoint(11930797,2608699));
maps.addOverLay(marker1);
function doit(){
marker1.openInfoWinUrl("http://www.51ditu.com");
}
LTEvent.addListener(marker1,"mouseover",doit);
⑥设定信息窗口的高宽
复制内容到剪贴板 程序代码var marker1 = new LTMarker(new LTPoint(11930797,2608699));
maps.addOverLay(marker1);
function doit(){
marker1.openInfoWinHtml("Hello World!");
}
marker1.setInfoWinWidth(300);//文档中出错
marker1.setInfoWinHeight(200);
LTEvent.addListener(marker1,"mouseover",doit);
⑦依据经纬度添加信息窗口
复制内容到剪贴板 程序代码var infoWin = new LTInfoWindow(new LTPoint(11930797,2608699));
infoWin.setLabel("http://www.mzwu.com"); //支持HTML
maps.addOverLay(infoWin);
⑧在标记上添加信息窗口
复制内容到剪贴板 程序代码var marker1 = new LTMarker(new LTPoint(11930797,2608699));
maps.addOverLay(marker1);
var infoWin = new LTInfoWindow(marker1);
infoWin.setLabel("http://www.mzwu.com"); //支持HTML
maps.addOverLay(infoWin);
⑨依据经纬度添加文字标签
复制内容到剪贴板 程序代码var infoWin = new LTMapText(new LTPoint(11930797,2608699));
infoWin.setLabel("http://www.mzwu.com"); //支持HTML
maps.addOverLay(infoWin);
⑩添加折线并修改默认新式(用VML，IE Only)
复制内容到剪贴板 程序代码<style type="text/css">
<!--
v\:*{ Behavior:url(#default#VML);}
-->
</style>
<script language="javascript">
var points = new Array();
points.push(new LTPoint(11629376,3995776));
points.push(new LTPoint(11642688,3988608));
points.push(new LTPoint(11641152,3992640));
var polyLine = new LTPolyLine(points);
polyLine.setLineColor("#FF0000");
polyLine.setLineStroke(8);
maps.addOverLay(polyLine);
</script>
㈢标注接口(接口方式:Javascript)
1.使用方法
复制内容到剪贴板 程序代码<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<script language="javascript" src="http://api.51ditu.com/js/ezmarker.js"></script>
<script language="javascript">
var ez=new LTEZMarker("ezmarker");
</script>
2.其他操作
①获取标注接口的值
复制内容到剪贴板 程序代码//setMap是ezmarker内部定义的接口，这里可以根据实际需要实现该接口
function setMap(point,zoom)
{
var str = "";
str += "经度:" + point.getLongitude() + "\n";
str += "纬度:" + point.getLatitude() + "\n";
str += "比例尺:" + zoom;
alert(str);
}
LTEvent.addListener(ez,"mark",setMap);//"mark"是标注事件
②为标注接口指定城市
复制内容到剪贴板 程序代码ez.setDefaultView("fuzhou",4);
③标注接口结合Form
复制内容到剪贴板 程序代码<form method="get" action="target.asp">
<script language="javascript">
//设置ezmarker显示时的中心点和比例尺级别
ez.setValue(new LTPoint(11200000,4000000),5);
</script>
<input type="submit" value="Submit"/>
</form>
④使用搜索控件和地图浏览控件
ez.setPlaceList(true);//在地图上显示地图浏览控件
ez.setSearch(true,"福州");//在地图上显示搜索控件，并将默认搜索城市指定为福州
说明：当两个控件放在同一页面中且参数值都为true时可实现联动!
㈣搜索接口(接口方式:Javascript)
1.使用方法
复制内容到剪贴板 程序代码<script language="javascript" src="http://api.51ditu.com/js/search.js"></script>
<script language="javascript">
var search=new LTLocalSearch(showPoint);
</script>
2.其他操作
①搜索并获取搜索接口的值
复制内容到剪贴板 程序代码function showPoint(searchResult)
{
if(searchResult.searchPoints.length>0)//如果存在搜索结果
{
var poi=searchResult.searchPoints[0];//搜索结果中的第一项
alert(poi.name+'\nNTU坐标:'+poi.point);
}
else
{
alert('无结果');
}
}
search.setCity('北京');
search.search('灵图');
②指定位置周边搜索
复制内容到剪贴板 程序代码search.setCity('北京');
search.search('美食','天安门');//在'天安门'的周边查找'美食'
③指定点周边搜索
复制内容到剪贴板 程序代码search.radius=3000;//设置搜索半径范围
search.search('美食',new LTPoint(11636777,3990569));//以指定的中心点进行搜索
④在地图上显示搜索结果
复制内容到剪贴板 程序代码<body onload="onLoad()">
<script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>
<script language="javascript">
var map;
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("myMap");
map.addControl(new LTStandMapControl());
search.setCity('北京');
search.search('灵图');
}
</script>
㈤导航接口(接口方式:Javascript 或 http + xml)
1.使用方法
复制内容到剪贴板 程序代码<script language="javascript" src="http://api.51ditu.com/js/navigate.js"></script>
<script language="javascript">
var obj = new LTNavigate(fun); //创建一个驾驶导航对象
</script>
2.其他操作
①实现简单的驾驶导航
②将导航的结果的显示在地图上
三、附录
1.比例级别定义表
0级 -------------------- 1:25m
1级 -------------------- 1:50m
2级 -------------------- 1:100m
3级 -------------------- 1:250m
4级 -------------------- 1:500m
5级 -------------------- 1:1km
6级 -------------------- 1:2.5km
7级 -------------------- 1:5km
8级 -------------------- 1:10km
9级 -------------------- 1:25km
10级 ------------------- 1:50km
11级 ------------------- 1:100km
12级 ------------------- 1:500km
2.城市代码表
城市代码是某个城市的英文简称。如北京市(beijing)、天津市(tianjin)、上海市(shanghai)
+ 查看当前日志评论 (2)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.109 ms
标题: 我要地图接口应用举例
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.109 ms
标题: 我要地图接口应用举例
评论内容:
== 种田大汉 2008-03-23 04:35 PM ----
比51的工作人员说的明白多了,让我这个门外汉,,有几分明白
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.125 ms