googleearth离线地图_谷歌插件离线安装

Google离线地图API概要解析

发布时间:2018-01-17 版权:

 

1.说明

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

2.实现

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

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

<span ><span > 
 
 
 
 
 
 
 
 
 
   </span></span>

       function BigeMap) { }  BigeMap.prototype.tileSize = new google.maps.Size256, 256);//瓦片大小  BigeMap.prototype.maxZoom = 19;//允许最大缩放层级  BigeMap.prototype.minZoom = 5;//允许最小缩放层级  BigeMap.prototype.name = “地图”;  BigeMap.prototype.getTile = function coord, zoom, ownerDocument) {    var img = ownerDocument.createElement“img”);    img.style.width = this.tileSize.width + “px”;    img.style.height = this.tileSize.height + “px”;    //定义瓦片的相对路径    var strURL = ‘电子地图瓦片目录/’;    //其中zoom为层级,x可以理解为该瓦片在整个地图中的列数,y为行数,图片格式下载的时候选择png或者jpg,我这里是png格式    strURL += zoom + “/” + coord.x + “/” + coord.y + ‘.png’;    img.src = strURL;    return img;  };  var localMap = new BigeMap);  var satel=new BigeMap);  satel.name=’卫星影像’;  satel.getTile = function coord, zoom, ownerDocument) {    var img = ownerDocument.createElement“img”);    img.style.width = this.tileSize.width + “px”;    img.style.height = this.tileSize.height + “px”;    var strURL = ‘卫星影像瓦片目录/’;    strURL += zoom + “/” + coord.x + “/” + coord.y + ‘.png’;    img.src = strURL;    return img;  };  var myOptions = {    center: new google.maps.LatLng23.56,104.252), //地图中心坐标    zoom: 4,    //地图层级    mapTypeControl: true,  //默认右上角显示地图名称    mapTypeControlOptions: {    mapTypeIds: [‘satel’, ‘localMap’]   }  };  //创建一个map对象,以下代码使用参数myOptions)在

 元素 id为map_canvas) 创建了一个新的地图,并默认在地图右上角显示 卫星影像和电子地图切换  var map = new google.maps.Mapdocument.getElementById“map_canvas”), myOptions);  map.mapTypes.set‘localMap’, localMap);  map.mapTypes.set‘satel’, satel);  map.setMapTypeId‘localMap’); //设置默认显示的地图为卫星影像

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

  • 添加标注

var marker = new google.maps.Marker{

  position: new google.maps.LatLng27.56,104.252),//设置标注所在经纬度坐标(此为必须)

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

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

 title:“Hello World!”//标注的名称

});
 marker.setMapmap);//将定义的标注显示在地图上

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

  • 获取地图中心坐标

    map.getCenter);

  • 获取地图层级

    map.getZoom);

     

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

         google.maps.event.addListenermap,‘zoom_changed’,function event)

    {

    document.getElementById“showZoom”).innerHTML = map.getZoom);
    });

  •       鼠标移动获取经纬度坐标

      google.maps.event.addListenermap,‘mousemove’,function event){

     document.getElementById“showLatlng”).innerHTML=

  event.latLng.lng)+‘,’+event.latLng.lat);
  });

  •  绘制折线

//定义一个点坐标数组变量,将所有点从头到尾连成一条线
  
var flightPlanCoordinates = [
    new google.maps.LatLng37.772323, –122.214897),
    new google.maps.LatLng21.291982, –157.821856),
    new google.maps.LatLng-18.142599178.431),
    new google.maps.LatLng-27.46758153.027892)
  ];
  var flightPath = new google.maps.Polyline{

    path: flightPlanCoordinates,//相应点坐标
    
strokeColor: “#FF0000”,//定义线条颜色
    
strokeOpacity: 1.0//线条透明的 取值0~1.0之间,由完全透明到不透明
    
strokeWeight: //线条粗细,单位为px
  
});
  flightPath.setMapmap);//将线条显示在地图上

  •  绘制多边形

var coords = [
  new google.maps.LatLng25.774252100.190262),
  new google.maps.LatLng18.466465106.118292),
  new google.maps.LatLng32.321384104.75737),
  new google.maps.LatLng25.774252100.190262)
];
polygon = new google.maps.Polygon{

  paths: coords,
  strokeColor: “#FF0000”//边线颜色
  
strokeOpacity: 0.8//边线透明度
  
strokeWeight: 2,  //边线粗细
  
fillColor: “#FF0000”//填充颜色
  
fillOpacity: 0.35 //填充透明度
});
polygon.setMapmap); //将多边形显示在地图上

  •  绘制圆形、矩形和上述方法类似, 不再重复,下面介绍信息窗口(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标签显示内容效果
var contentString = 

+
    

+
    

+
    

Bigemap地图下载器

+
    +
    

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

+
    

官方地址: http://www.bigemap.com“>’+
    ‘http://www.bigemap.com

+
    +
    ;
var infowindow = new google.maps.InfoWindow{

    content: contentString, //显示内容
    maxWidth:400 //定义最大宽度
});
var marker = new google.maps.Marker{

    position: new google.maps.LatLng27.56,104.252),
    map: map,
    title:“Bigemap”
});
//点击Maker标注显示InfoWindow
google.maps.event.addListenermarker, ‘click’function) {

  infowindow.openmap,marker);
});

 

效果如下图:

QQ截图20160407174759.jpgQQ截图20160407174759.jpg

以上就是Google离线地图API简单功能开发示例的详细解析,更多相关可参考Google地图官方API文档,推荐API之家的 【google地图参考手册】

相关链接:【百度离线地图发布】 【谷歌离线地图发布】

体验案例 用户名/密码:admin ):【www.bigemap.com/bmap/login.html】  【www.bigemap.com/google/login.htm

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注