脚本语言 订阅所有【脚本语言】的日志

我要地图接口应用举例

编辑:dnawo 日期:2007-03-21

字体大小: 小 中 大
我要地图(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)

上一篇: 什么是GPS/GIS/RS
下一篇: PDF,ZIP,DOC链接的标注
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 2 | 引用: 0 | 查看次数: 8180
种田大汉[2008-03-23 04:35 PM | | | 124.163.169.19 | del | 回复回复]
沙发
比51的工作人员说的明白多了,让我这个门外汉,,有几分明白
发表评论
请登录后再发表评论！