离线地图发布有多种方式均可以实现,可以利用ArcGis Server、GeoServer等构建地图Web服务器,还可以使用 谷歌地图、百度地图等API进行地图发布服务。本篇主要简单介绍如何调用Google离线地图API实现地图标注、获取坐标、及其他参数的设置。【
如何发布Google离线地图
】
Google地图规定了地图瓦片在存放的目录命名方式和层级关系。通过Http请求地图的层级(放大级别) 、坐标值对应的瓦片,服务器向客户端返回结果实现。
第一步:引入谷歌地图核心JS文件后,使用原型和构造函数的方法创建一个基础的地图对象 ,分别定义了瓦片的大小,允许最大缩放层级,允许最小缩放层级,名称以及引入瓦片地图。如下:
<span style="color:#333333"> Google API离线地图 元素 (id为map_canvas) 创建了一个新的地图,并默认在地图右上角显示 卫星影像和电子地图切换
var map = new google.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添加标注、获取坐标等。
var
marker =
new
google.maps.Marker({
position:
new
google.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();
//
定义一个点坐标数组变量,将所有点从头到尾连成一条线
var
flightPlanCoordinates = [
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
)
var
flightPath =
new
google.maps.Polyline({
path: flightPlanCoordinates,
//
相应点坐标
strokeColor:
“#FF0000”
,
//
定义线条颜色
strokeOpacity:
1.0
,
//
线条透明的 取值
0~1.0
之间,由完全透明到不透明
strokeWeight:
2
//
线条粗细,单位为
px
flightPath.setMap(map);
//
将线条显示在地图上
绘制多边形
var
coords = [
new
google.maps.LatLng(
25.774252
,
100.190262
),
new
google.maps.LatLng(
18.466465
,
106.118292
),
new
google.maps.LatLng(
32.321384
,
104.75737
),
new
google.maps.LatLng(
25.774252
,
100.190262
)
polygon =
new
google.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
标签显示内容效果
var
contentString =
‘
Bigemap
地图下载器
‘
+
高清卫星影像资料下载
(
自动拼接,含经纬度和投影信息
)
、高程等高线下载
(
支持
AutoCAD
矢量
)
、三维地图、影像精度
0.25
、无偏移套合、支持【投影转换】转西安
80\北
京
54\C
GCS2000
、在线标注、标准分幅、
KML
、
Arcgis
、
Mapinfo
、
Global Maper
、
MapGIS
(提供
GIS
地理信息处理\发
布咨询)
‘
+
官方地址:
‘
+
‘http://www.bigemap.com’
+
”
;
var
infowindow =
new
google.maps.InfoWindow({
content: contentString,
//
显示内容
maxWidth:
400
//
定义最大宽度
});
var
marker =
new
google.maps.Marker({
position:
new
google.maps.LatLng(
27.56
,
104.252
),
map: map,
title:
“Bigemap”
});
//
点击
Maker
标注显示
InfoWindow
google.maps.event.addListener(marker,
‘click’
,
function
() {
infowindow.open(map,marker);
效果如下图:
以上就是Google离线地图API简单功能开发示例的详细解析,更多相关可参考Google地图官方API文档,推荐API之家的 【
google地图参考手册
】
相关链接:【
百度离线地图发布
】 【
谷歌离线地图发布
】
体验案例( 用户名/密码:admin ):【
www.bigemap.com/bmap/login.html
】 【
www.bigemap.com/google/login.html
】
转载自:
https://blog.csdn.net/www2111/article/details/83826795