程序员的出路

alex.w的Blog

导航

51地图使用方法，及API

Posted on 2008-04-20 20:36  alex.w  阅读(812)  评论(1)    收藏  举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<!--导入两个Js文件-->
<script language="javascript" src=" http://api.51ditu.com/js/maps.js"></script>

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

<!--显示标注接口（EzMarker）-->


<tr><td colspan='2'>如何获取标注接口的值</td></tr>

<tr><td>经度</td><td><input type="text" id="x" name="x"></td></tr>

<tr><td>纬度</td><td><input type="text" id="y" name="y"></td></tr>

<tr><td>比例尺级别</td><td><input type="text" id="z" name="z"></td></tr>

</table>
<div id="bb"></div>
<script language="JavaScript">

<!--

//setMap是ezmarker内部定义的接口，这里可以根据实际需要实现该接口

function setMap(point,zoom)

{

document.getElementById("x").value=point.getLongitude();

document.getElementById("y").value=point.getLatitude();

document.getElementById("z").value=zoom;

}

var ezmarker = new LTEZMarker("pos");
ezmarker.setDefaultView("hefei",7);

LTEvent.addListener(ezmarker,"mark",setMap);//"mark"是标注事件

//-->

</script>
  

</BODY>
</HTML>

二、显示地图标注

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<input type="hidden" id="longitude" name="longitude" value="11728606"><!--经度-->
<input type="hidden" id="latitude" name="latitude" value="3187882"><!--纬度-->
<input type="hidden" id="zoom" name="zoom" value="3"><!--比例尺级别-->
<input type="hidden" name="city" value="合肥"><!--城市-->

<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">
$=function(){return document.getElementById(arguments[0]);};
x=$("longitude").value;
y=$("latitude").value;
z=$("zoom").value;
c=$("city").value;

var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( c , z );
var mPoint = new LTPoint(x,y);
maps.centerAndZoom(mPoint,z);

//标注
//添加控制图标

var icon = new LTIcon("td.jpg","","");

var marker1= new LTMarker(mPoint,icon);
marker1.setLabel("<img src=tack.gif>这是我的家");
marker1.setFontSize(12);
marker1.setFontColor("blue");
//var text = new LTMapText(mPoint);
//text.setLabel("<img src=td.jpg>幸福源");
//text.setFontSize(20);
//text.setFontColor("red");
//maps.asddOverLay(text);

maps.addOverLay(marker1);
//var text = new LTMapText

//添加控制图标

//var icon = new LTIcon();
//icon.setImgUrl("td.jpg");
//icon.setWidth(30);
//icon.setHeight(30);


//添加控制大小的控件LTStandMapControl

var control = new LTStandMapControl()
maps.addControl(control);

//添加简易控制控件 LTSmallMapControl 用法和上面的一样

 


</script>

</BODY>
</HTML>