地图接口地图调用地图租用中国地图北京地图上海地图广州地图深圳地图南京地图杭州地图电子地图

地图接口(Maps API)

功能接口方式使用方法常见问题新范例文档

类参考

功能

地图接口_基本功能

上图就是本接口提供的功能，简单的几行JavaScript代码就可以得到上图的功能（放大/缩小/平移/测距/测面/打印/还原）。

本接口也提供基于事件的交互开发模式，使得您可以通过地图和您的用户交互。

地图接口_标记功能

地图接口提供标点功能，除了基本功能外，您还可以向地图上增加多个点，如上图。

标记的图标是可以自定义的。

地图接口_标线功能

地图接口提供标(折)线功能，除了基本功能外，您还可以向地图上增加多条线，如上图。

线的样式(粗细、颜色)是可以自定义的。

返回顶部

使用方法

如果您对地图还不是特别了解，您先看一下地图基础知识。

步骤1：引入JavaScript文件

步骤2：引入一个DIV

步骤3：创建地图对象

返回顶部

常见问题

地图有哪些元素构成	如何导入Maps API	如何创建最基本的地图
如何添加标准缩放控件	如何添加简易缩放控件	如何添加拉框放大控件
如何使用拉框查找功能	如何添加测距离控件	如何添加测面积控件
如何添加标注控件	如何添加自己的控件	如何用JavaScript代码实现地图平移
如何在地图上添加个性化的标记	如何修改我的标记的图标和大小	如何为我的标记添加事件和事件响应
如何为我的标记添加信息窗口	如何设置信息窗口的大小	如何依据经纬度或标记添加信息窗口
如何结合事件为不同的标记添加不同的信息窗口	如何依据经纬度或标记添加文字标签	如何设置文字标签的样式
如何添加折线	如何修改折线的样式	什么是事件
如何让地图支持键盘和鼠标滚轮操作

地图有哪些元素构成

本接口提供可全国范围内漫游的地图，主要包含几类元素：

分块地图图片，这是展现给大家最直接的元素；
控件，点击某个控件，代表某个事件的开始，包含：

标准缩放控件
简易缩放控件
拉框放大控件
拉框查找控件
测量距离控件，简称“测距控件”
测量面积控件，简称“测面控件”
标注控件

叠加物，包括：“标记”、“折线”
信息窗口
文字标签
事件，有了事件，您就可以开发出基于地图的交互应用。

返回常见问题

如何导入Maps API

返回常见问题

如何创建最基本的地图

创建最基本的地图有两种方法：

利用“城市代码”和“比例级别”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>

var maps = new LTMaps( "myMap" );

maps.cityNameAndZoom( "beijing" , 5 );

</script>

</body>
</html>

利用中心点和比例级别

如何添加标准缩放控件

操作控件用来控制地图，包括：常用操作控件(LTStandMapControl)、简易操作控件(LTSmallMapControl)

通过addControl方法，可以方便的将预定义的常用操作控件添加到创建的地图中。

点击查看例子

返回常见问题

如何添加简易缩放控件

操作控件用来控制地图，包括：常用操作控件(LTStandMapControl)、简易操作控件(LTSmallMapControl)

通过addControl方法，可以方便的将预定义的简易操作控件添加到创建的地图中。

点击查看例子

返回常见问题

如何添加拉框放大控件

只要创建好一个拉框放大控件对象，就可以用addControl方法来添加到地图中。

点击查看例子

返回常见问题

如何使用拉框查找功能

拉框查找是一个全新的概念，通过用户的一个拉框动作和激发一个动作事件，拉框查找可以返回拉框查找区域的最大点和最小点的经纬度，这样依据这些经纬度坐标用户可以查找自己的数据，带来很大的便利性，而关于动作事件，一般是触发在拉框结束的时候，具体追溯到一个鼠标按钮按下抬起的时候触发用户定义的方法来实现功能。
通过用addControl方法来添加一个拉框查找对象，再为对象添加相应的事件可以充分地利用拉框查找的功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>
<script language="javascript" src=" http://api.51ditu.com/js/maps.js "></script>
</head>

<body>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>

<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "beijing" , 5 );
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 );
</script>
</body>
</html>

点击查看例子

返回常见问题

如何添加测距离控件

利用测距离的控件，可以很方便的在地图随意测量多个点之间的总距离，操作过程也很方便，点击鼠标左键来在地图上选择不同的测量点，通过点击鼠标右键来结束测量，期间能够完全支持鼠标对地图的拖拽，或者利用鼠标右键进行拖拽地图。添加控件的方法演用了之前控件的添加方式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemeas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>
<style type="text/css">

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

<body>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>

<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "beijing" , 5 );
var control = new LTPolyLineControl();
maps.addControl( control );
control.setTop( 10 );
</script>
</body>
</html>

点击查看例子

返回常见问题

如何添加测面积控件

测面积控件的功能类似于测距离控件的功能，不同的只是测面积和测距离的区别，控件技持对多边形面积的测量。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemeas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>
<style type="text/css">

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

<body>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>

<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "beijing" , 5 );
var control = new LTPolygonControl();
maps.addControl( control );
control.setTop( 10 );
</script>
</body>
</html>

点击查看例子

返回常见问题

如何添加标注控件

标注控件是一个可以在地图上标点的控件，通过为标注控件添加事件，例如：添加一个mousedown事件，可以在标注结束后，通过控件提供的方法返回标注的经纬度。

点击查看例子

返回常见问题

如何添加自己的控件

点击地图自己的控件，都有触发响应的事件，当然我们也允许您通过JavaScript代码来触发这些事件。

这项功能允许用户在地图以外的地方创建自己的个性化按钮来和地图的控件定，使个性化的按钮不会极限在地图可视化区内，让用户可以有更多的创造来DIY自己的想法。
可以被邦定的控件包括：LTStandMapContorl标准缩放控件、LTSmallMapControl简易缩放控件、LTZoomInControl拉框放大控件、LTZoomSearchControl拉框查找控件、LTMarkControl标注控件、LTPolyLineControl测距离控件、LTPolygon测面积控件。

<body>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td><div id="myMap" style="position:relative; width:400px; height:300px;"></div></td>
<td><table border="1" cellspacing="2" cellpadding="0">
<tr>
<td align="center"><input type="button" value=" UP " onClick="maps.mapMoveToUp( 2 );"></td>
</tr>
<tr>
<td align="center"><input type="button" value="LEFT" onClick="maps.mapMoveToLeft( 2 );">
<input type="button" value="RIGHT" onClick="maps.mapMoveToRight( 2 );"></td>
</tr>
<tār>
<td align="center"><input type="button" value="DOWN" onClick="maps.mapMoveToDown( 2 );"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" + " onClick="maps.zoomIn();"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" 1 " onClick="maps.zoomTo( 0 );"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" 2 " onClick="maps.zoomTo( 1 );"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" 3 " onClick="maps.zoomTo( 2 );"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" 4 " onClick="maps.zoomTo( 3 );"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" 5 " onClick="maps.zoomTo( 4 );"></td>
</tr>
<tr>
<td align="center"><input type="button" value=" - " onClick="maps.zoomOut();"></td>
</tr>
</table></td>
</tr>
</table>
<script language="javascript">
var maps = new LTMaps( "myMap" );
　　 maps.cityNameAndZoom( "beijing" , 5 );
</script>
</body>
</html>

点击查看例子

返回常见问题

如何用JavaScript代码实现地图平移

通过简单的moveToCenter方法，您可以使任何点动态地移动到中心的位置。

点击查看例子

返回常见问题

如何在地图上添加个性化的标记

标记就是叠加在地图上图标，用来表示某个位置。

在创建好的地图上添加个性化的标记，我们称之为添加叠加物，通过定义好的addOverLay方法，您可以方便地把您创建的标记添加到地图上。

点击查看例子

返回常见问题

如何修改我的标记的图标和大小

为创建个性化的标记，利用LTIcon，您可以方便的利于任何您想要的图片来替代原有的默认的标记图标。

点击查看例子

返回常见问题

如何为我的标记添加事件和事件响应

如果标记的添加只是让他硬生生的叠加在地图上，那将是一个毫无生气的呆板的原型，为此，我们可以利用LTEvent来为标记添加事件，标记可以响用户定义的事件，做到很好的交互性。

点击查看例子

返回常见问题

如何为我的标记添加信息窗口

通过信息窗口，可以很好的为标记做进一步的说明，使人们更加明白您的标记表达的意思，您甚至可以使您的标记信息窗口链接到一个合法的网络地址来做更好的宣传。
创建一个简单的信息窗口：

创建一个可以链接到网络地址的信息窗口：

如何设置信息窗口的大小

如果您觉得我们为您设定的信息窗口的默认大小非常不符合您的要求，那么您可以通过预定义的方法来重新调整信息窗口的大小。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>
<script language="javascript" src=" http://api.51ditu.com/js/maps.js "></script>
</head>

<body>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>

<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "beijing" , 5 );
var marker1 = new LTMarker( new LTPoint( 11636224 , 3991040 ) );
maps.addOverLay( marker1 );
LTMarker.setInfoWinWidth( 300 );
LTMarker.setInfoWinHeight( 200 );
LTEvent.addListener( marker1 , "mouseover" , function(){ marker1.openInfoWinUrl( "http://www.51ditu.com" ) } );
</script>
</body>
</html>

点击查看例子

返回常见问题

如何依据经纬度或标记添加信息窗口

根据用户给出的经纬度和是传递一个LTMarker对象，可以很方便的在地图的任何地方添加一个信息窗口的叠加物。
根据一个经纬度来添加一个信息窗口：

点击查看例子

返回常见问题

根据用户给出的经纬度和是传递一个LTMarker对象，可以很方便的在地图的任何地方添加一个信息窗口的叠加物。

根据一个经纬度来添加一个信息窗口：

</html>

点击查看例子

根据一个标记来添加一个信息窗口，则信息窗口会指示在标记上：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>
<script language="javascript" src=" http://api.51ditu.com/js/maps.js "></script>
</head>

<body>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>

<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "beijing" , 5 );
var point = new LTPoint( 11640969 , 3989945 );//北京
var marker = new LTMarker( point );
maps.addOverLay( marker );
var infoWin = new LTInfoWindow( marker );
infoWin.setLabel( "<a href='http://www.51ditu.com' target='_blank'>http://www.51ditu.com</a>" );
maps.addOverLay( infoWin );
</script>
</body>
</html>

点击查看例子

返回常见问题

如何结合事件为不同的标记添加不同的信息窗口

利用信息窗口控件结合事件的运用，可以方便的为每个标记添加不同的信息窗口。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>
<script language="javascript" src=" http://api.51ditu.com/js/maps.js "></script>
</head>

<body>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>

<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "beijing" , 5 );
var points = new Array(0);
points.push( new LTPoint( 11641088 , 3992704 ) );
points.push( new LTPoint( 11636160 , 3991104 ) );
points.push( new LTPoint( 11642688 , 3988608 ) );
points.push( new LTPoint( 11634688 , 3987136 ) );

function addInfoWin( obj , num ){
var info = new LTInfoWindow( obj );
function doit(){
info.setLabel( "这是第 " + num + "个标记！" );
maps.addOverLay( info );
}
LTEvent.addListener( obj , "mouseover" , doit );
}
for( var i=0;i<points.length;i++ ){
var marker = new LTMarker( points[i]);
addInfoWin( marker , i );
maps.addOverLay( marker );
}
</script>
</body>
</html>

点击查看例子

返回常见问题

如何依据经纬度或标记添加文字标签

这是一个类似于信息窗口的控件，可以通过用户给出的位置（经纬度）或一个标记来增加一个文字标签说明，文字标签以左边框的中心点指向用户给出的位置，文字标签的添加方试同信息窗口，在此只给出通过经纬度添加标签的方法。

点击查看例子

返回常见问题

如何设置文字标签的样式

通过文字标签对象提供的方法，可以方便地设置文字标签的边框线粗细、大小和颜色，可以设置背景颜色，字体颜色等。具体请参看LTMapText的说明文档。以下给出设置背景颜色的例子，其它依此类推。

点击查看例子

返回常见问题

如何添加折线

如果您是使用IE内核的浏览器来浏览您创建的地图，那么API会利用VML来绘制折线叠加物，则您需要预先在您的页面上的标记中通过“xmlns:v="urn:schemeas-microsoft-com:vml"”来创建一个命名空间。有关VML的知识，请参考相关的资料，下面只介绍具体做法。
请添加以下代码：

在地图上创建折线段，首先要有系列化的折线点数组。利用LTPolyLine可以很方便的收集折线点数组并标示在地图的可视范围上。以下的例子基于IE浏览器。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemeas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>
<style type="text/css">

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

<body>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>

<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "beijing" , 5 );
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 );
maps.addOverLay( polyLine );
</script>
</body>
</html>

点击查看例子

返回常见问题

如何修改折线的样式

利用预定义的setPolyLineColor方法和setPolyLineStroke方法可以随时随地设置折线的颜色和粗细。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemeas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>
<style type="text/css">

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

<body>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>

<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "beijing" , 5 );
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>
</body>
</html>

点击查看例子

返回常见问题

如何让地图支持键盘和鼠标滚轮操作

利用地图的handleKeyboard方法和handleMouseScroll方法可以为地图扩充键盘和鼠标滚轮操作的功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemeas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JavaScript Maps API</title>
<style type="text/css">

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

<body>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>

<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "beijing" , 5 );
maps.cityNameAndZoom( "beijing" , 5 );
maps.handleKeyboard(); //键盘操作支持
maps.handleMouseScroll();//鼠标滚轮支持
</script>
</body>
</html>

点击查看例子

返回常见问题

什么是事件

通过LTEvent，用户可以很方便的为预定义的对象添加自己定义的响应程序，即是说，可以通过LTEvent来为一个标记添加一个鼠标事件，当这个鼠标事件发生时，可以相应地激活预先定义的程式，做到很好的交互性。51ditu Maps API对整个事件进行了重新定义，使各个对象的对应事件名称更加具体化，并精简许多的名称来减少混淆，以下是对象对应的事件名称列表：

对象	事件名称	参数	描述
LTMaps	zoom	oldZoom,newZoom	在地图缩放等级变化时触发，参数分别是变化前和变化后的缩放等级。
	move	centerPoint,reDraw	在地图移动后触发，第一个参数是新的中心点坐标，第二个参数代表地图是否因为大幅更改而需要重绘
	click	point	鼠标在地图上点击时触发，参数是事件发生时鼠标相对于地图左上角的位置
	mousedown	point	鼠标在地图上按下时触发，参数是事件发生时鼠标相对于地图左上角的位置
	mousedrag	point	鼠标在地图上拖动时触发，参数是事件发生时鼠标相对于地图左上角的位置
	mouseup	point	鼠标在地图上释放时触发，参数是事件发生时鼠标相对于地图左上角的位置
	resize	mapArray	地图可视范围改变时触发，参数是一个数组，存放新的可视范围的宽度和高度，以像素为单位。
LTMarker	click	无	标注被点击时触发
	mouseover	无	鼠标进入标注区域时触发
	mouseout	无	鼠标离开标注区域时触发
LTZoomSearchControl	mouseup	boundsLatLng	鼠标在地图上拖拉出一个区域后释放鼠标时触发，参数是该区域的经纬度
LTMarkControl	mouseup	point	在完成选点之后触发，参数是一个LTPoint,代表所选点坐标

返回常见问题

返回顶部