《2022年地图地图接口[参 .pdf》由会员分享，可在线阅读，更多相关《2022年地图地图接口[参 .pdf（24页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、功能使用本接口通过简单的几行JavaScript代码就可以得到上图的功能（放大/缩小/平移/测距/测面/打印/还原）。本接口也提供基于事件的交互开发模式，使得您可以通过地图和您的用户交互。地图接口提供标点功能，除了基本功能外，您还可以向地图上增加多个点，标记的图标是可以自定义的。地图接口提供标(折)线功能，除了基本功能外，您还可以向地图上增加多条线，线的样式(粗细、颜色)是可以自定义的。接口方式JavaScript 使用方法如果您对地图还不是特别了解，您先看一下地图基础知识。步骤 1：引入 JavaScript文件 步骤 2：引入一个DIV 步骤 3：创建地图对象 var maps=new L
2、TMaps(myMap);maps.cityNameAndZoom(beijing,5);常见问题地图有哪些元素构成如何导入 Maps API如何创建最基本的地图如何添加标准缩放控件如何添加简易缩放控件如何添加拉框放大控件如何使用拉框查找功能如何添加测距离控件如何添加测面积控件名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 24 页 -如何添加标注控件如何添加自己的控件如何用 JavaScript代码实现地图平移如何在地图上添加个性化的标记如何修改我的标记的图标和大小如何为我的标记添加事件和事件响应如何为我的标记添加信息窗口如何设置信息窗口的大小如何依据经纬度或标记添加信息窗口如
3、何结合事件为不同的标记添加不同的信息窗口如何依据经纬度或标记添加文字标签如何设置文字标签的样式如何添加折线如何修改折线的样式什么是事件如何让地图支持键盘和鼠标滚轮操作地图有哪些元素构成本接口提供可全国范围内漫游的地图，主要包含几类元素：分块地图图片，这是展现给大家最直接的元素；控件，点击某个控件，代表某个事件的开始，包含：o标准缩放控件o简易缩放控件o拉框放大控件o拉框查找控件o测量距离控件，简称“测距控件”o测量面积控件，简称“测面控件”o标注控件叠加物，包括：“标记”、“折线”信息窗口文字标签事件，有了事件，您就可以开发出基于地图的交互应用。返回常见问题如何导入 Maps API Java
4、Script Maps API 名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 24 页 -返回常见问题如何创建最基本的地图创建最基本的地图有两种方法：利用“城市代码”和“比例级别”JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);点击查看例子点击查看城市代码列表点击查看比例级别定义利用中心点和比例级别名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 24 页 -JavaScript Maps API var maps=new LTMaps(myMap);map
5、s.centerAndZoom(new LTPoint(11636224,3991040),5);返回常见问题如何添加标准缩放控件操作控件用来控制地图，包括：常用操作控件(LTStandMapControl)、简易操作控件(LTSmallMapControl)通过 addControl方法，可以方便的将预定义的常用操作控件添加到创建的地图中。JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var control=new LTStandMapControl();maps.addContr
6、ol(control);名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 24 页 -点击查看例子返回常见问题如何添加简易缩放控件操作控件用来控制地图，包括：常用操作控件(LTStandMapControl)、简易操作控件(LTSmallMapControl)通过 addControl方法，可以方便的将预定义的简易操作控件添加到创建的地图中。JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var control=new LTSmallMapControl();maps.ad
7、dControl(control);点击查看例子返回常见问题如何添加拉框放大控件只要创建好一个拉框放大控件对象，就可以用addControl方法来添加到地图中。名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 24 页 -JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var control=new LTZoomInControl();maps.addControl(control);点击查看例子返回常见问题如何使用拉框查找功能拉框查找是一个全新的概念，通过用户的一个拉框动
8、作和激发一个动作事件，拉框查找可以返回拉框查找区域的最大点和最小点的经纬度，这样依据这些经纬度坐标用户可以查找自己的数据，带来很大的便利性，而关于动作事件，一般是触发在拉框结束的时候，具体追溯到一个鼠标按钮按下抬起的时候触发用户定义的方法来实现功能。通过用 addControl方法来添加一个拉框查找对象，再为对象添加相应的事件可以充分地利用拉框查找的功能。JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 24 页 -var c
9、ontrol=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,
10、mouseup,doit);点击查看例子返回常见问题如何添加测距离控件利用测距离的控件，可以很方便的在地图随意测量多个点之间的总距离，操作过程也很方便，点击鼠标左键来在地图上选择不同的测量点，通过点击鼠标右键来结束测量，期间能够完全支持鼠标对地图的拖拽，或者利用鼠标右键进行拖拽地图。添加控件的方法演用了之前控件的添加方式。JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 24 页 -var control=new LTPoly
11、LineControl();maps.addControl(control);control.setTop(10);点击查看例子返回常见问题如何添加测面积控件测面积控件的功能类似于测距离控件的功能，不同的只是测面积和测距离的区别，控件技持对多边形面积的测量。JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var control=new LTPolygonControl();maps.addControl(control);control.setTop(10);点击查看例子名师资料总结-
12、精品资料欢迎下载-名师精心整理-第 8 页，共 24 页 -返回常见问题如何添加标注控件标注控件是一个可以在地图上标点的控件，通过为标注控件添加事件，例如：添加一个mousedown事件，可以在标注结束后，通过控件提供的方法返回标注的经纬度。JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var control=new LTMarkControl();maps.addControl(control);function getPoi()var poi=control.getMarkCon
13、trolPoint();alert(纬度：+poi.getLatitude()+n经度：+poi.getLongitude();LTEvent.addListener(control,mouseup,getPoi);点击查看例子返回常见问题如何添加自己的控件点击地图自己的控件，都有触发响应的事件，当然我们也允许您通过JavaScript代码来触发这些事件。这项功能允许用户在地图以外的地方创建自己的个性化按钮来和地图的控件定，使个性化的按钮不会极限在地图可视化区内，让用户可以有更多的创造来DIY 自己的想法。可以被邦定的控件包括：LTStandMapContorl标准缩放控件、LTSmallMa
14、pControl简易缩放控件、LTZoomInControl拉框放大控件、LTZoomSearchControl 拉框查找控件、LTMarkControl标注控件、名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 24 页 -LTPolyLineControl测距离控件、LTPolygon 测面积控件。JavaScript Maps API 名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 24 页 -var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);点击查看例子返回常见问题如何用 JavaScrip
15、t代码实现地图平移通过简单的 moveToCenter 方法，您可以使任何点动态地移动到中心的位置。JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);setTimeout(maps.moveToCenter(new LTPoint(11629376,3995776),3000);点击查看例子名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 24 页 -返回常见问题如何在地图上添加个性化的标记标记就是叠加在地图上图标，用来表示某个位置。在创建好的地图上添加个性化的标记，我们称
16、之为添加叠加物，通过定义好的addOverLay 方法，您可以方便地把您创建的标记添加到地图上。JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var marker1=new LTMarker(new LTPoint(11636224,3991040);var marker2=new LTMarker(new LTPoint(11641152,3992640);maps.addOverLay(marker1);maps.addOverLay(marker2);点击查看例子返回常见问题如
17、何修改我的标记的图标和大小为创建个性化的标记，利用LTIcon，您可以方便的利于任何您想要的图片来替代原有的默认的标记图标。名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 24 页 -JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var icon=new LTIcon();icon.setImageUrl(http:/ marker1=new LTMarker(new LTPoint(11636224,3991040),icon);maps.addOverLay(ma
18、rker1);点击查看例子返回常见问题如何为我的标记添加事件和事件响应如果标记的添加只是让他硬生生的叠加在地图上，那将是一个毫无生气的呆板的原型，为此，我们可以利用 LTEvent 来为标记添加事件，标记可以响用户定义的事件，做到很好的交互性。JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var marker1=new LTMarker(new LTPoint(11636224,3991040);名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 24 页 -maps.a
19、ddOverLay(marker1);function doit()alert(Hello World!);LTEvent.addListener(marker1,mouseover,doit);点击查看例子返回常见问题如何为我的标记添加信息窗口通过信息窗口，可以很好的为标记做进一步的说明，使人们更加明白您的标记表达的意思，您甚至可以使您的标记信息窗口链接到一个合法的网络地址来做更好的宣传。创建一个简单的信息窗口：JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var marker1=
20、new LTMarker(new LTPoint(11636224,3991040);maps.addOverLay(marker1);LTEvent.addListener(marker1,mouseover,function()marker1.openInfoWinHtml(Hello World!);点击查看例子返回常见问题名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 24 页 -创建一个可以链接到网络地址的信息窗口：JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5
21、);var marker1=new LTMarker(new LTPoint(11636224,3991040);maps.addOverLay(marker1);LTEvent.addListener(marker1,mouseover,function()marker1.openInfoWinUrl(http:/);点击查看例子返回常见问题如何设置信息窗口的大小如果您觉得我们为您设定的信息窗口的默认大小非常不符合您的要求，那么您可以通过预定义的方法来重新调整信息窗口的大小。JavaScript Maps API 名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 24 页 -v
22、ar 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:/);点击查看例子返回常见问题如何依据经纬度或标记
23、添加信息窗口根据用户给出的经纬度和是传递一个LTMarker 对象，可以很方便的在地图的任何地方添加一个信息窗口的叠加物。根据一个经纬度来添加一个信息窗口：JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var point=new LTPoint(11640969,3989945);/北京var infoWin=new LTInfoWindow(point);infoWin.setLabel(http:/);maps.addOverLay(infoWin);名师资料总结-精品资料欢迎下
24、载-名师精心整理-第 16 页，共 24 页 -点击查看例子根据一个标记来添加一个信息窗口，则信息窗口会指示在标记上：JavaScript Maps API 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(http:/);ma
25、ps.addOverLay(infoWin);点击查看例子返回常见问题如何结合事件为不同的标记添加不同的信息窗口利用信息窗口控件结合事件的运用，可以方便的为每个标记添加不同的信息窗口。名师资料总结-精品资料欢迎下载-名师精心整理-第 17 页，共 24 页 -JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var points=new Array(0);points.push(new LTPoint(11641088,3992704);points.push(new LTPoint(1
26、1636160,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;ipoints.length;i+)var
27、marker=new LTMarker(pointsi);addInfoWin(marker,i);maps.addOverLay(marker);点击查看例子返回常见问题如何依据经纬度或标记添加文字标签这是一个类似于信息窗口的控件，可以通过用户给出的位置（经纬度）或一个标记来增加一个文字标签说明，文字标签以左边框的中心点指向用户给出的位置，文字标签的添加方试同信息窗口，在此只给出通过经纬度添加标签的方法。名师资料总结-精品资料欢迎下载-名师精心整理-第 18 页，共 24 页 -JavaScript Maps API var maps=new LTMaps(myMap);maps.cityN
28、ameAndZoom(beijing,5);var point=new LTPoint(11640969,3989945);/北京var text=new LTMapText(point);text.setLabel(51ditu的文字标签);maps.addOverLay(text);点击查看例子返回常见问题如何设置文字标签的样式通过文字标签对象提供的方法，可以方便地设置文字标签的边框线粗细、大小和颜色，可以设置背景颜色，字体颜色等。具体请参看LTMapText 的说明文档。以下给出设置背景颜色的例子，其它依此类推。JavaScript Maps API 名师资料总结-精品资料欢迎下载-名师
29、精心整理-第 19 页，共 24 页 -var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);var point=new LTPoint(11640969,3989945);/北京var text=new LTMapText(point);text.setLabel(51ditu的文字标签);text.setBackgroundColor(#ff00ff);maps.addOverLay(text);点击查看例子返回常见问题如何添加折线如果您是使用IE 内核的浏览器来浏览您创建的地图，那么API 会利用 VML来绘制折线叠加物，则
30、您需要预先在您的页面上的标记中通过“xmlns:v=urn:schemeas-microsoft-com:vml”来创建一个命名空间。有关VML的知识，请参考相关的资料，下面只介绍具体做法。请添加以下代码：JavaScript Maps API 在地图上创建折线段，首先要有系列化的折线点数组。利用LTPolyLine可以很方便的收集折线点数组并标示在地图的可视范围上。以下的例子基于IE 浏览器。名师资料总结-精品资料欢迎下载-名师精心整理-第 20 页，共 24 页 -JavaScript Maps API var maps=new LTMaps(myMap);maps.cityNameAnd
31、Zoom(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);点击查看例子返回常见问题如何修改折线的样式利用预定义的setPolyLineColor方法和 setPolyLineStroke方法可以随时随地设
32、置折线的颜色和粗细。JavaScript Maps API 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(#FF0
33、000);polyLine.setLineStroke(8);maps.addOverLay(polyLine);点击查看例子返回常见问题如何让地图支持键盘和鼠标滚轮操作利用地图的 handleKeyboard 方法和 handleMouseScroll方法可以为地图扩充键盘和鼠标滚轮操作的功能。JavaScript Maps API 名师资料总结-精品资料欢迎下载-名师精心整理-第 22 页，共 24 页 -var maps=new LTMaps(myMap);maps.cityNameAndZoom(beijing,5);maps.cityNameAndZoom(beijing,5);ma
34、ps.handleKeyboard();/键盘操作支持maps.handleMouseScroll();/鼠标滚轮支持 点击查看例子返回常见问题什么是事件通过 LTEvent，用户可以很方便的为预定义的对象添加自己定义的响应程序，即是说，可以通过LTEvent 来为一个标记添加一个鼠标事件，当这个鼠标事件发生时，可以相应地激活预先定义的程式，做到很好的交互性。51ditu Maps API 对整个事件进行了重新定义，使各个对象的对应事件名称更加具体化，并精简许多的名称来减少混淆，以下是对象对应的事件名称列表：对象事件名称参数描述LTMaps zoom oldZoom,newZoom 在地图缩放
35、等级变化时触发，参数分别是变化前和变化后的缩放等级。move centerPoint,reDraw 在地图移动后触发，第一个参数是新的中心点坐标，第二个参数代表地图是否因为大幅更改而需要重绘click point 鼠标在地图上点击时触发，参数是事件发生时鼠标相对于地图左上角的位置mousedown point 鼠标在地图上按下时触发，参数是事件发生时鼠标相对于地图左上角名师资料总结-精品资料欢迎下载-名师精心整理-第 23 页，共 24 页 -的位置mousedrag point 鼠标在地图上拖动时触发，参数是事件发生时鼠标相对于地图左上角的位置mouseup point 鼠标在地图上释放时触
36、发，参数是事件发生时鼠标相对于地图左上角的位置resize mapArray 地图可视范围改变时触发，参数是一个数组，存放新的可视范围的宽度和高度，以像素为单位。LTMarker click 无标注被点击时触发mouseover 无鼠标进入标注区域时触发mouseout 无鼠标离开标注区域时触发LTZoomSearchControl mouseup boundsLatLng 鼠标在地图上拖拉出一个区域后释放鼠标时触发，参数是该区域的经纬度LTMarkControl mouseup point 在完成选点之后触发，参数是一个LTPoint,代表所选点坐标名师资料总结-精品资料欢迎下载-名师精心整理-第 24 页，共 24 页 -