1200字范文 > bigemap地图Google离线地图API概要解析

bigemap地图Google离线地图API概要解析

时间：2022-12-27 18:50:23

Google离线地图API概要解析

发布时间：-01-17 版权：

1.说明

离线地图发布有多种方式均可以实现，可以利用ArcGis Server、GeoServer等构建地图Web服务器，还可以使用谷歌地图、百度地图等API进行地图发布服务。本篇主要简单介绍如何调用Google离线地图API实现地图标注、获取坐标、及其他参数的设置。【如何发布Google离线地图】

2.实现

Google地图规定了地图瓦片在存放的目录命名方式和层级关系。通过Http请求地图的层级（放大级别）、坐标值对应的瓦片，服务器向客户端返回结果实现。

第一步：引入谷歌地图核心JS文件后，使用原型和构造函数的方法创建一个基础的地图对象 ,分别定义了瓦片的大小，允许最大缩放层级，允许最小缩放层级，名称以及引入瓦片地图。如下：

<span style="color:#333333">GoogleAPI离线地图元素(id为map_canvas)创建了一个新的地图，并默认在地图右上角显示卫星影像和电子地图切换varmap=newgoogle.maps.Map(document.getElementById("map_canvas"),myOptions);map.mapTypes.set('localMap',localMap);map.mapTypes.set('satel',satel);map.setMapTypeId('localMap');//设置默认显示的地图为卫星影像"_ue_custom_node_="true"></span>

自此，已经成功创建离线地图，只需下载相应的地图瓦片放在指定目录中即可浏览，并可随意切换地图，按照上述方法还可新增地图源。下面简述如何调用API添加标注、获取坐标等。

添加标注

varmarker =newgoogle.maps.Marker({

position:newgoogle.maps.LatLng(27.56,104.252),//设置标注所在经纬度坐标（此为必须）

icon:'icon.png',//自定义标注图标，不写就默认使用Google默认图标

draggable:true,//标注是否支持鼠标拖拽

title:"Hello World!"//标注的名称

});

marker.setMap(map);//将定义的标注显示在地图上

注意：以上 marker.setMap(map)可以不需要，直接在marker变量中新增map：map即可，在下面添加多边线、线、圆也如此。

获取地图中心坐标

map.getCenter();

获取地图层级

map.getZoom();

例如鼠标滚动获取地图层级：

google.maps.event.addListener(map,'zoom_changed',function(event)

{

document.getElementById("showZoom").innerHTML = map.getZoom();

});

鼠标移动获取经纬度坐标

google.maps.event.addListener(map,'mousemove',function(event){

document.getElementById("showLatlng").innerHTML=

event.latLng.lng()+','+event.latLng.lat();

});

绘制折线

//定义一个点坐标数组变量，将所有点从头到尾连成一条线

varflightPlanCoordinates = [

newgoogle.maps.LatLng(37.772323, -122.214897),

newgoogle.maps.LatLng(21.291982, -157.821856),

newgoogle.maps.LatLng(-18.142599,178.431),

newgoogle.maps.LatLng(-27.46758,153.027892)

];

varflightPath =newgoogle.maps.Polyline({

path: flightPlanCoordinates,//相应点坐标

strokeColor:"#FF0000",//定义线条颜色

strokeOpacity:1.0,//线条透明的取值0~1.0之间，由完全透明到不透明

strokeWeight:2//线条粗细，单位为px

});

flightPath.setMap(map);//将线条显示在地图上

绘制多边形

varcoords = [

newgoogle.maps.LatLng(25.774252,100.190262),

newgoogle.maps.LatLng(18.466465,106.118292),

newgoogle.maps.LatLng(32.321384,104.75737),

newgoogle.maps.LatLng(25.774252,100.190262)

];

polygon =newgoogle.maps.Polygon({

paths: coords,

strokeColor:"#FF0000",//边线颜色

strokeOpacity:0.8,//边线透明度

strokeWeight:2,//边线粗细

fillColor:"#FF0000",//填充颜色

fillOpacity:0.35//填充透明度

});

polygon.setMap(map);//将多边形显示在地图上

绘制圆形、矩形和上述方法类似，不再重复，下面介绍信息窗口（InfoWindow）。

InfoWindow 在地图上方的浮动窗口中显示内容，通过点击地图上的Marker，看到活动的信息窗口。

InfoWindow 构造函数采用的是 InfoWindow options 对象，该对象指定了用于显示信息窗口的一组初始参数。在创建信息窗口的过程中，系统不会在地图上添加信息窗口。要显示信息窗口，您需要调用 InfoWindow 上的 open() 方法，向其传递要在其中打开信息窗口的 Map，以及向其传递用于锚定信息窗口的 Marker（可选）。（如果未提供任何标记，那么，会在其 position 属性上打开信息窗口）。

InfoWindow options 对象是包含以下字段的对象常量：

★content 包含了信息窗口打开时，系统要在其中显示的文本字符串或 DOM 节点。

★pixelOffset 包含了从信息窗口的顶部到信息窗口锚定位置的偏移量。实际上，您不应也无需修改此字段。

★position 包含了此信息窗口锚定位置的 LatLng。请注意，在标记上执行打开信息窗口操作时，系统会自动使用一个新位置更新该值。

★maxWidth 指定了信息窗口的最大宽度（以像素为单位）。

InfoWindow 的内容可以是文本字符串、HTML 代码段或 DOM 元素本身。要设置此内容，请在 InfoWindow options 构造函数中传递该内容，或者对InfoWindow显式调用 setContent()。如果想要显式调整内容的大小，您可以使用

进行此操作，如果您愿意，还可以启用滚动功能。请注意，如果您没有启用滚动功能，而内容的大小又超过了信息窗口的可用空间，那么，内容可能会从信息窗口中“溢”出。

InfoWindow 可附加到 Marker 对象（在这种情况下，它们的位置取决于标记的位置）上，或附加到地图本身指定的 LatLng 位置上。如果您一次只想显示一个信息窗口（正如 Google Maps 上的相应行为），那么，您只需创建一个信息窗口，然后在地图事件（例如用户点击）执行过程中将此信息窗口重新分配到不同的位置或标记中。但与 Google Maps API 第 2 版中的相应行为不同的是，如果您选择进行上述操作，那么，地图可能会立即显示多个 InfoWindow 对象。

要更改信息窗口的位置，您可以对信息窗口调用 setPosition() 以显式的方式更改其位置，或者使用 InfoWindow.open() 方法将信息窗口附加到新标记上。请注意，如果您在没有传递标记的情况下调用了 open()，那么，InfoWindow 将会使用在构建过程中通过 InfoWindow options 对象指定的位置，代码如下：

//定义显示内容，可以使用html标签显示内容效果

varcontentString ='

''+

Bigemap

地图下载器'+

高清卫星影像资料下载(自动拼接，含经纬度和投影信息)、高程等高线下载(支持AutoCAD矢量)、三维地图、影像精度0.25、无偏移套合、支持【投影转换】转西安80\北京54\CGCS2000、在线标注、标准分幅、KML、Arcgis、Mapinfo、Global Maper、MapGIS（提供GIS地理信息处理\发布咨询）'+