<!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>
<!--你可以更改iframe的width,height尺寸来决定要显示的地图大小-->
<iframe src="http://my.51ditu.com/my/single/final/webmap.html?lng=10890788&lat=3423587&zoom=0&txt=山木培训高新分校" width="500" height="450" ></iframe>
<div id="myMap" style="position:relative; width:400px; height:300px;"></div>
<script language="javascript">
var maps = new LTMaps( "myMap" );
maps.cityNameAndZoom( "xian" , 5 );
//添加标准缩放控件
//var control = new LTStandMapControl();
//maps.addControl( control );
//添加简易缩放控件
//var control = new LTSmallMapControl();
//maps.addControl( control );
//添加拉框放大控件
//var control = new LTZoomInControl();
//maps.addControl( control );
//使用拉框查找功能
/*
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 );
*/
//添加标注控件
/*
var control = new LTMarkControl();
maps.addControl( control );
function getPoi(){
var poi = control.getMarkControlPoint();
alert( "纬度:" + poi.getLatitude() + "\n经度:" + poi.getLongitude() );
}
LTEvent.addListener( control , "mouseup" , getPoi );
*/
//JavaScript代码实现地图平移 有用
setTimeout( "maps.moveToCenter( new LTPoint( 10890772,3423589))" , 10 );
//在地图上添加个性化的标记
//var marker1 = new LTMarker(new LTPoint(10890772,3423589));
//var marker2 = new LTMarker( new LTPoint(11641152,3992640));
//maps.addOverLay( marker1 );
//maps.addOverLay( marker2 );
//修改我的标记的图标和大小, 有用
var icon = new LTIcon();
icon.setImageUrl( "0.gif" );
icon.setWidth( 24 );
icon.setHeight( 24 );
var marker1 = new LTMarker( new LTPoint( 10890772,3423589 ) , icon );
//LTMarker.setInfoWinWidth( 100 );
//LTMarker.setInfoWinHeight( 40 );
maps.addOverLay( marker1 );
LTEvent.addListener( marker1 , "click" , function(){ marker1.openInfoWinHtml( "<a href=http://www.100class.com target=_blank>山木培训高新分校</a></br>乘车路线" ) } );
//双击放大功能
var moveLsitener;
function onDblClick()//定义在双击的时候执行的函数
{
moveLsitener=LTEvent.addListener(maps,"moveend",onMoveEnd);
//因为系统默认双击的时候会将地图定位到中心,因此,只需要定义地图在定位到中心完成之后放大地图即可
}
function onMoveEnd()//定义地图在定位到中心完成之后执行的函数
{
LTEvent.removeListener(moveLsitener);//删除事件注册
maps.zoomIn();//放大地图
}
LTEvent.addListener(maps,"dblclick",onDblClick);//绑定事件注册
var infoWin = new LTInfoWindow( marker1 );
infoWin.setLabel( "<a href=http://www.100class.com target=_blank>山木培训高新分校</a></br>乘车路线" );
maps.addOverLay( infoWin );
/* 增加多个标注
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 );
}
*/
maps.handleKeyboard(); //键盘操作支持
maps.handleMouseScroll();//鼠标滚轮支持
maps.handleDoubleclick();
</script>
</body>
</html>
分享到:
相关推荐
6. **生活服务**:51地图集成了丰富的POI(Point of Interest)信息,包括餐饮、购物、娱乐等生活服务。用户可以查找附近的兴趣点,获取商家信息、评价等。 7. **接口开发**:51地图提供API接口,开发者可以利用...
3. 集成51地图 51地图是一种基于Web的地图服务,提供了强大的地图功能,例如路线查询、公交导航等。 3.1 路线查询 要实现路线查询,需要使用51地图的API,例如:<script>var route = new BMap.Route(); route....
51地图是中国的一家地图服务提供商,提供包括定位、导航、地理编码、轨迹服务等在内的多种API接口,用于开发者集成到自己的应用程序中。在这个场景下,"SQL"可能指的是在后台系统中存储和管理与地图相关的数据,例如...
本篇将详细讲解如何掌握百度地图API和51地图API的实例应用。 首先,我们来看百度地图API。百度地图API是百度提供的一套免费的地图服务接口,它支持Web服务和JavaScript两种调用方式。通过这个API,开发者可以实现...
51地图API是一款为中国开发者提供的地图服务接口,它允许开发者集成到自己的应用程序中,实现地图显示、定位、路径规划等功能。本压缩包“mapsapi.zip”包含了一个51地图API的示例和源代码,方便开发者参考学习。 ...
当你提到“自己调用的51地图”时,这可能是指你利用51地图的API(应用程序接口)或者SDK(软件开发工具包)来在自己的程序或应用中集成51地图的功能。以下是一些关于如何自己调用51地图的关键知识点: 1. **API和...
51地图是中国的一款在线地图服务提供商,提供了丰富的地图API供开发者使用,以便将地图功能集成到自己的网页中。本文将详细讲解如何调用51地图API,并将其嵌入到网页中,同时介绍相关的操作如地图的放大和缩小。 ...
51地图接口是一种用于开发地图应用的技术工具,它允许开发者通过调用API(应用程序编程接口)来集成51map的功能,比如地图展示、定位、路径规划等,为各种Web或移动应用提供地理信息服务。在本项目中,我们看到一...
51地图API是51地图服务提供的一套接口,用于帮助开发者在自己的应用程序中集成地图、定位、路线规划等地理信息服务。这篇文档将详细介绍51地图API的基本概念、功能及如何通过实例应用来理解其工作原理。 首先,51...
51电子地图API是开发者用来集成地图功能到他们应用程序中的工具集。这个API提供了一系列的接口,使得开发者能够实现地图显示、定位、路径规划、地理编码(地址转换为经纬度坐标)和反地理编码(经纬度坐标转换为地址...
- 集成51地图API,实现在电子地图上的标注功能。 3. **测试与优化** - 对系统进行全面测试,确保各项功能正常运行。 - 根据测试结果优化系统性能,提高用户体验。 4. **部署上线** - 将系统部署到服务器,供...
通过以上步骤,你应该能够成功地在你的应用中集成51ditu地图定位功能,并对其进行一定程度的定制。然而,实际开发中可能还会涉及到更多的API调用和功能实现,例如地理编码、路径规划、热力图等。为了进一步提升用户...
51地图是中国的一家在线地图服务提供商,它提供了丰富的地图数据和接口,方便开发者集成到自己的应用中。 首先,我们需要了解51地图的API。51地图提供了JavaScript API和RESTful API,对于Java开发者来说,通常会...
1. **地图API集成**:集成百度地图JavaScript API,引入相关库文件,如`您的密钥"></script>`。 2. **地图初始化**:在网页中创建一个容器元素,然后调用百度地图API的`BMap.Map()`函数创建地图实例,设置中心点...
7. **语音配套**:系统具备语音提示功能,可能通过集成的语音合成模块或者外接的语音芯片实现,为用户提供语音地图说明,增加人性化交互。 8. **编程语言与源程序**:编写源程序以控制单片机和LCD的交互,可能使用...
在本文中,我们将深入探讨如何使用jQuery和第三方插件来集成Google Maps API,为网站添加交互式的地图功能。Google Maps API是一个强大的工具,允许开发者在网页上嵌入地图,实现定位、导航、路线规划等功能。jQuery...
在本教程中,我们将探讨如何使用Adobe Flex(FLEX)框架来创建地图应用程序,特别是借助The Earthplayer API来实现对LIVE、GOOGLE和51地图的支持。首先,我们需要了解Flex是一个基于MXML和ActionScript的开发平台,...
本教程将详细讲解如何在C#窗体应用中集成GMap控件,实现离线地图的加载与显示。 首先,我们需要了解GMap.NET的基本概念。GMap.NET是一个基于Google Maps API的.NET库,它不仅支持Google Maps,还支持Bing Maps、...
51单片机打飞机游戏机是一款基于STC12C5A60S2单片机设计的经典游戏设备,其特色在于集成了地图编辑与保存功能,为玩家提供了更丰富的游戏体验。游戏机的核心控制单元是STC12C5A60S2单片机,这是一款高性能的8051系列...
【Flex地图应用教程】这篇教程主要讲解如何使用Flex技术结合earthplayerlib库来开发地图应用,涉及到了Google、Live和51地图等多个平台的集成。教程以PPT的形式呈现,适合初学者学习。 首先,Flex是一种基于...