谷歌离线API详细解析

1、.谷歌离线api 详细解析1. 说明离线地图发布有多种方式均可以实现，可以利用 arcgis server 、geoserver等构建地图 web 效劳器，还可以使用谷歌地图、百度地图等 api 进展地图发布效劳。本篇主要简单介绍如何调用google 离线地图api 实现地图标注、获取坐标、及其他参数的设置。2. 实现google 地图规定了地图瓦片在存放的目录命名方式和层级关系。通过请求地图的层级放大级别、坐标值对应的瓦片，效劳器向客户端返回结果实现。第一步：引入谷歌地图核心js 文件后，使用原型和构造函数的方法创立一个根底的地图对象,分别定义了瓦片的大小，允许最大缩放层级，允许最小缩放层级

2、，名称以及引入瓦片地图。如下：1. 2. 3. 4.5.6.google api离线地图 7.8.9. 10.html height: 100%; 11.body height: 100%; margin: 0; padding: 0; 12.#map_canvas height: 100%; 13. 14. 15. 16. 17. 18. 19. 20.function demo() 21. dtotype.tilesize = new google.maps.size(256, 256);/瓦片大小22. dtotype.maxzoom = 19;/允许最大缩放

3、层级23. dtotype.minzoom = 5;/允许最小缩放层级24. d = 地图 ;25.dtotype.gettile = function (coord, zoom, ownerdocument) .26.var img = ownerdocument.createelement(img); 27.img.style.width = this.tilesize.width + px; 28.img.style.height = this.tilesize.height + px; 29./ 定义瓦片的相对路径30.v

4、ar strurl = 电子地图瓦片目录/;31./ 其中 zoom 为层级，x 可以理解为该瓦片在整个地图中的列数，y 为行数，图片格式下载的时候选择 png 或者 jpg ，我这里是png 格式32.strurl += zoom + / + coord.x + / + coord.y + .png; 33.img.src = strurl; 34.return img; 35.; 36.var localmap = new demo(); 37.var satel =new demo(); 38. = 卫星影像 ; 39.satel.gettile = function

5、 (coord, zoom, ownerdocument) 40.var img = ownerdocument.createelement(img); 41.img.style.width = this.tilesize.width + px; 42.img.style.height = this.tilesize.height + px; 43.var strurl = 卫星影像瓦片目录/;44.strurl += zoom + / + coord.x + / + coord.y + .png; 45.img.src = strurl; 46.return img; 47.; 48.var

6、 myoptions = 49.center: new google.maps.latlng(23.56,104.252), /地图中心坐标50.zoom: 4, /地图层级51.maptypecontrol: true, /默认右上角显示地图名称52.maptypecontroloptions: 53.maptypeids: satel, localmap 54. 55.; 56. /创立一个map 对象，以下代码使用参数(myoptions) 在元素 (id为 map_canvas)创建了一个新的地图，并默认在地图右上角显示卫星影像和电子地图切换57.var map = new googl

7、e.maps.map(document.getelementbyid(map_canvas), myopti ons);58.map.maptypes.set(localmap, localmap); 59.map.maptypes.set(satel, satel); 60.map.setmaptypeid(localmap); /设置默认显示的地图为卫星影像61. 自此，已经成功创立离线地图，只需下载相应的地图瓦片放在指定目录中即可浏览，并可随意切换地图，按照上述方法还可新增地图源。下面简述如何调用api 添加标注、获取坐标等。添加标注.varmarker= new google.maps

8、.marker(position: new google.maps.latlng(27.56,104.252),/设置标注所在经纬度坐标此为必须icon:icon.png,/draggable: true,/title:hello world!/自定义标注图标，不写就默认使用标注是否支持鼠标拖拽标注的名称google默认图标);marker.setmap(map);/将定义的标注显示在地图上注意：以上 marker.setmap(map) 可以不需要，直接在 marker 变量中新增map ：map 即可，在下面添加多边线、线、圆也如此。获取地图中心坐标map.getcenter();获取地图

9、层级map.getzoom();例如鼠标滚动获取地图层级：1.google.maps.event.addlistener(map,zoom_changed,function (event) 2.document.getelementbyid(showzoom).innerhtml =map.getzoom();3.); 鼠标移动获取经纬度坐标google.maps.event.addlistener(map,mousemove,function (event)document.getelementbyid(showlatlng) .innerhtml =event .latlng.lng()+

10、,+ event.latlng.lat(););绘制折线/ 定义一个点坐标数组变量，将所有点从头到尾连成一条线varflightplancoordinates= new google.maps.latlng(37.772323, -122.214897),new google.maps.latlng(21.291982, -157.821856),new google.maps.latlng(-18.142599, 178.431),new google.maps.latlng(-27.46758, 153.027892);varflightpath=new google.maps.polyl

11、ine(path: flightplancoordinates,/相应点坐标strokecolor: #ff0000,/定义线条颜色strokeopacity: 1.0, /线条透明的取值 01.0strokeweight: 2 / 线条粗细，单位为px);flightpath.setmap(map);/将线条显示在地图上之间，由完全透明到不透明.绘制多边形1.var coords = 2.new google.maps.latlng(25.774252, 100.190262), 3.new google.maps.latlng(18.466465, 106.118292), 4.new g

12、oogle.maps.latlng(32.321384, 104.75737), 5.new google.maps.latlng(25.774252, 100.190262) 6.; 7.polygon = new google.maps.polygon( 8.paths: coords, 9.strokecolor: #ff0000, /边线颜色10.strokeopacity: 0.8, /边线透明度11.strokeweight: 2, /边线粗细12.fillcolor: #ff0000, /填充颜色13.fillopacity: 0.35 /填充透明度14.);15.polygon

13、.setmap(map); /将多边形显示在地图上绘制圆形、矩形和上述方法类似，不再重复，下面介绍信息窗口（infowindow 。infowindow 在地图上方的浮动窗口中显示内容，通过点击地图上的marker ，看到活动的信息窗口。infowindow 构造函数采用的是infowindow options对象，该对象指定了用于显示信息窗口的一组初始参数。在创立信息窗口的过程中，系统不会在地图上添加信息窗口。要显示信息窗口，您需要调用 infowindow 上的 open() 方法，向其传递要在其中翻开信息窗口的 map ，以及向其传递用于锚定信息窗口的 marker 可选。如果未提供任何

14、标记，那么，会在其 position 属性上翻开信息窗口。infowindow options 对象是包含以下字段的对象常量： content 包含了信息窗口翻开时，系统要在其中显示的文本字符串或dom 节点。 pixeloffset 包含了从信息窗口的顶部到信息窗口锚定位置的偏移量。实际上，您不应也无需修改此字段。 position 包含了此信息窗口锚定位置的latlng 。请注意，在标记上执行翻开信息窗口操作时，系统会自动使用一个新位置更新该值。 maxwidth指定了信息窗口的最大宽度以像素为单位。infowindow 的内容可以是文本字符串、 html 代码段或 dom 元素本身。要设

15、置此内容，请在 infowindow options 构造函数中传递该内容，或者对 infowindow 显式调用 setcontent() 。如果想要显式调整内容的大小，您可以使.用 进展此操作，如果您愿意，还可以启用滚动功能。请注意，如果您没有启用滚动功能，而内容的大小又超过了信息窗口的可用空间，那么，内容可能会从信息窗口中“溢 出。infowindow 可附加到 marker 对象在这种情况下，它们的位置取决于标记的位置上，或附加到地图本身指定的 latlng 位置上。如果您一次只想显示一个信息窗口正如 google maps 上的相应行为，那么，您只需创立一个信息窗口，然后在地图事件例

16、如用户点击执行过程中将此信息窗口重新分配到不同的位置或标记中。但与 google maps api 第 2 版中的相应行为不同的是，如果您选择进展上述操作，那么，地图可能会立即显示多个infowindow对象。要更改信息窗口的位置，您可以对信息窗口调用setposition() 以显式的方式更改其位置，或者使用 infowindow.open() 方法将信息窗口附加到新标记上。请注意，如果您在没有传递标记的情况下调用了 open() ，那么， infowindow 将会使用在构建过程中通过 infowindow options 对象指定的位置，代码如下：1./ 定义显示内容，可以使用 html

17、 标签显示内容效果2.var contentstring= +3.+4. + 5.xx解放碑 +6.+7. 解放碑中央商务区主要以效劳业为主，而且主要是占地小、高增值的现代效劳业。 2006 年，解放碑 cbd 有各类楼宇635 幢，其中具有商贸功能的421 幢，具有商务功能的192 幢，随着世界商贸中心、万豪国际金融中心、世界贸易中心等现代商务楼盘的相继落成+8. + 9. 官方地址：+10.:/ + 12. ; 13. var infowindow= new google.maps.infowindow(14.content: contentstring, /显示内容15.maxwidth:400 /定义最大宽度16.); 17.var marker = new google.maps.marker( 18.position: new google.maps.latlng(27.56,104.252), 19.map: map, 20.title:xx解放碑 21.);