实现51Map地图接口(示例代码)

　　51Map免费提供了地图接口以下是调用接口并且实现地理位置标注，存储,修改和回显功能。

　　51地图网址：http://api.51ditu.com/

　　在网页中引入

复制代码代码如下:

　　在地图上标注：

复制代码代码如下:

　　//地图标注

　　$(document).ready(function(){

　　var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);

　　var map=new LTMaps("mapdiv");//地图对象

　　var controlB; //标记控件

　　map.centerAndZoom("tianjin",5);//天津

　　map.handleMouseScroll();//鼠标滚轮

　　var controlZoom = new LTStandMapControl();//缩放控件

　　map.addControl( controlZoom );

　　controlB = new LTMarkControl();//添加标注控件并把事件绑定到按钮

　　controlB.setVisible(false);

　　document.getElementById("addPosition").onclick=function (){controlB.btnClick()};

　　map.addControl( controlB );

　　LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );

　　})

复制代码代码如下:

　　//添加标注时执行此函数

　　function getPoi(controlB){

　　var poi = controlB.getMarkControlPoint();

　　$("#x").val(poi.getLongitude()); //x,y为input标签id通过它传入后台储存位置

　　$("#y").val(poi.getLatitude());

　　}

复制代码代码如下:

　　<a href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank"

　　style="color: #D01E14; font-weight: bolder; font-size: 12px;">看不到地图请点这里</a>

　　</div>

　　在读图上回显标注：

复制代码代码如下:

　　//地图回显

　　$(document).ready(function(){

　　map("mapdiv");

　　})

　　//地图

　　function map(div){

　　var map=new LTMaps(div);//地图对象

　　var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注

　　map.handleMouseScroll();//鼠标滚轮缩放

　　map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图

　　map.addOverLay(marker) //添加标注到地图上

　　}

　　修改地图上的标注：

复制代码代码如下:

　　//地图回显

　　$(document).ready(function(){

　　map("mapdiv");

　　})

　　//地图

　　function map(div){

　　var map=new LTMaps(div);//地图对象

　　var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//创建标注

　　map.handleMouseScroll();//鼠标滚轮缩放

　　map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //以坐标为中心显示地图

　　map.addOverLay(marker) //添加标注到地图上

　　var controlZoom = new LTStandMapControl();

　　map.addControl( controlZoom );

　　//添加标注控件并把事件绑定到按钮

　　var controlB = new LTMarkControl();//标记控件

　　controlB.setVisible(false);

　　document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};

　　map.addControl( controlB );

　　LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );

　　}

　　//添加标注时执行此函数

　　function getPoi(controlB){

　　var poi = controlB.getMarkControlPoint();

　　$("#x").val(poi.getLongitude());

　　$("#y").val(poi.getLatitude());

　　}

　　其他参数设置：

　　可以自定义标注图标样式

复制代码代码如下:

　　var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//创建图标对象

　　var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//创建标注

　　//当鼠标移动到标注上可以显示标注内容

　　LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('标注内容')});

教程首页更多教程