`
liu_bia
  • 浏览: 109195 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论
  • ztbzg: 学习了,今天用上了,多谢lz 以前动态增加div 是直接拼字符 ...
    动态生成层

集成51地图

阅读更多

<!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>

分享到:
评论

相关推荐

    电子地图 51地图 地图的使用

    6. **生活服务**:51地图集成了丰富的POI(Point of Interest)信息,包括餐饮、购物、娱乐等生活服务。用户可以查找附近的兴趣点,获取商家信息、评价等。 7. **接口开发**:51地图提供API接口,开发者可以利用...

    多引擎地图服务组件的开发.pdf

    3. 集成51地图 51地图是一种基于Web的地图服务,提供了强大的地图功能,例如路线查询、公交导航等。 3.1 路线查询 要实现路线查询,需要使用51地图的API,例如:&lt;script&gt;var route = new BMap.Route(); route....

    51地图api SQL

    51地图是中国的一家地图服务提供商,提供包括定位、导航、地理编码、轨迹服务等在内的多种API接口,用于开发者集成到自己的应用程序中。在这个场景下,"SQL"可能指的是在后台系统中存储和管理与地图相关的数据,例如...

    掌握百度地图API、51地图API实例

    本篇将详细讲解如何掌握百度地图API和51地图API的实例应用。 首先,我们来看百度地图API。百度地图API是百度提供的一套免费的地图服务接口,它支持Web服务和JavaScript两种调用方式。通过这个API,开发者可以实现...

    51地图Api 加 例子 可以看源代码

    51地图API是一款为中国开发者提供的地图服务接口,它允许开发者集成到自己的应用程序中,实现地图显示、定位、路径规划等功能。本压缩包“mapsapi.zip”包含了一个51地图API的示例和源代码,方便开发者参考学习。 ...

    自 己调 用 的5 1 地 图

    当你提到“自己调用的51地图”时,这可能是指你利用51地图的API(应用程序接口)或者SDK(软件开发工具包)来在自己的程序或应用中集成51地图的功能。以下是一些关于如何自己调用51地图的关键知识点: 1. **API和...

    调用51地图API,将它嵌入到网页中

    51地图是中国的一款在线地图服务提供商,提供了丰富的地图API供开发者使用,以便将地图功能集成到自己的网页中。本文将详细讲解如何调用51地图API,并将其嵌入到网页中,同时介绍相关的操作如地图的放大和缩小。 ...

    51地图接口 轻松搞定51map

    51地图接口是一种用于开发地图应用的技术工具,它允许开发者通过调用API(应用程序编程接口)来集成51map的功能,比如地图展示、定位、路径规划等,为各种Web或移动应用提供地理信息服务。在本项目中,我们看到一...

    51地图的api和范例

    51地图API是51地图服务提供的一套接口,用于帮助开发者在自己的应用程序中集成地图、定位、路线规划等地理信息服务。这篇文档将详细介绍51地图API的基本概念、功能及如何通过实例应用来理解其工作原理。 首先,51...

    51电子地图的api

    51电子地图API是开发者用来集成地图功能到他们应用程序中的工具集。这个API提供了一系列的接口,使得开发者能够实现地图显示、定位、路径规划、地理编码(地址转换为经纬度坐标)和反地理编码(经纬度坐标转换为地址...

    公交查询系统课程设计

    - 集成51地图API,实现在电子地图上的标注功能。 3. **测试与优化** - 对系统进行全面测试,确保各项功能正常运行。 - 根据测试结果优化系统性能,提高用户体验。 4. **部署上线** - 将系统部署到服务器,供...

    地图定位调用51ditu

    通过以上步骤,你应该能够成功地在你的应用中集成51ditu地图定位功能,并对其进行一定程度的定制。然而,实际开发中可能还会涉及到更多的API调用和功能实现,例如地理编码、路径规划、热力图等。为了进一步提升用户...

    java地图标注,及显示

    51地图是中国的一家在线地图服务提供商,它提供了丰富的地图数据和接口,方便开发者集成到自己的应用中。 首先,我们需要了解51地图的API。51地图提供了JavaScript API和RESTful API,对于Java开发者来说,通常会...

    实现51job中选择职位,和百度地图中更改地区的功能

    1. **地图API集成**:集成百度地图JavaScript API,引入相关库文件,如`您的密钥"&gt;&lt;/script&gt;`。 2. **地图初始化**:在网页中创建一个容器元素,然后调用百度地图API的`BMap.Map()`函数创建地图实例,设置中心点...

    S51单片机语音地图

    7. **语音配套**:系统具备语音提示功能,可能通过集成的语音合成模块或者外接的语音芯片实现,为用户提供语音地图说明,增加人性化交互。 8. **编程语言与源程序**:编写源程序以控制单片机和LCD的交互,可能使用...

    jQuery第三方插件实现Google map的集成

    在本文中,我们将深入探讨如何使用jQuery和第三方插件来集成Google Maps API,为网站添加交互式的地图功能。Google Maps API是一个强大的工具,允许开发者在网页上嵌入地图,实现定位、导航、路线规划等功能。jQuery...

    教你怎样用FLEX做地图的教程

    在本教程中,我们将探讨如何使用Adobe Flex(FLEX)框架来创建地图应用程序,特别是借助The Earthplayer API来实现对LIVE、GOOGLE和51地图的支持。首先,我们需要了解Flex是一个基于MXML和ActionScript的开发平台,...

    C#中加载地图控件,支持离线地图显示

    本教程将详细讲解如何在C#窗体应用中集成GMap控件,实现离线地图的加载与显示。 首先,我们需要了解GMap.NET的基本概念。GMap.NET是一个基于Google Maps API的.NET库,它不仅支持Google Maps,还支持Bing Maps、...

    51单片机打飞机游戏机说明1

    51单片机打飞机游戏机是一款基于STC12C5A60S2单片机设计的经典游戏设备,其特色在于集成了地图编辑与保存功能,为玩家提供了更丰富的游戏体验。游戏机的核心控制单元是STC12C5A60S2单片机,这是一款高性能的8051系列...

    Flex地图教程 ppt

    【Flex地图应用教程】这篇教程主要讲解如何使用Flex技术结合earthplayerlib库来开发地图应用,涉及到了Google、Live和51地图等多个平台的集成。教程以PPT的形式呈现,适合初学者学习。 首先,Flex是一种基于...

Global site tag (gtag.js) - Google Analytics