博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Google Map API使用详解(五)——Google Map基本常识(下)
阅读量:6348 次
发布时间:2019-06-22

本文共 2205 字,大约阅读时间需要 7 分钟。

10、地图属性

默认情况下,在 Google Map API 中,地图使用标准的“绘制”图块显示。但是,Google Map API也支持其他地图类型。以下是标准地图类型:

G_NORMAL_MAP- 默认视图

G_SATELLITE_MAP - 显示 Google Earth卫星图像

G_HYBRID_MAP - 混合显示普通视图和卫星视图

G_DEFAULT_MAP_TYPES - 这三个类型的数组,在需要重复处理的情况下非常有用

可以使用 GMap2 对象的 setMapType() 方法设置地图类型。例如,下面的代码将地图设置为使用 Google 地球的卫星视图:

var map = new GMap2(document.getElementById("mapContainer"));

map.setMapType(G_SATELLITE_MAP);

地图还包含对了解情况非常有用的大量属性。例如,要了解当前视口的尺寸,可使用 GMap2 对象的 getBounds() 方法来返回 GLatLngBounds 值。

每个地图还包含一个“缩放级别”,用于定义当前视图的分辨率。在普通地图视图内,可以使用 0(最低缩放级别,在地图上可以看到整个世界)到 19(最高缩放级别,可以看到独立建筑物)之间的缩放级别。缩放级别因所查看地区而异,因为地球上某些地区的数据比其他地区更详细。在卫星视图中可以使用多达20个缩放级别。

可以通过使用 GMap2 对象的getZoom()方法检索地图当前使用的缩放级别。关于缩放级别、地图图块以及创建自己的自定义地图类型的更多信息,请参阅自定义叠加层部分。

 

11、地图交互

既然现在有了 GMap2 对象,就可以与之进行交互了。基本地图对象的外观和行为与您在 Google 地图网站上交互的地图非常相似,并带有大量内置行为。GMap2 对象还提供了大量配置方法来改变地图对象本身的行为。

默认情况下,和在 http://ditu.google.cn 上一样,地图对象会对用户的活动做出反应。但您可以使用大量实用工具方法改变此行为。例如,GMap2.disableDragging() 方法禁止了点击并拖拽地图到新位置的功能。

您还可以通过编程与地图交互。GMap2 对象支持可以直接改变地图状态的大量方法。例如,setCenter()、panTo() 和 zoomIn() 方法通过编程来操作地图,而不是通过用户交互来操作地图。

下面的示例显示一个地图,等待两秒钟,然后平移到新中心点。panTo 方法将地图中心设置在指定点处。如果指定点位于地图的可见部分,则地图会平稳地平移到该点,否则会跳至该点。(参考示例:MyTest3.html

var map = new GMap2(document.getElementById("mapContainer"));

map.setCenter(new GLatLng(39.970981,116.314108), 16);

window.setTimeout(function() { map.panTo(new GLatLng(39.927, 116.407));}, 1000);

可以通过使用 Google 地图 API 事件进行更复杂的交互。

 

12、信息窗口

所有使用 Google 地图 API的地图都有可能显示类型为 GInfoWindow 的单个“信息窗口”,该窗口在地图上端以浮动窗口显示 HTML 内容。信息窗口有点像漫画书上的文字气球;它有一个内容区域和锥形引线,引线的头在地图的指定点上。点击 Google 地图上的标记可以看到活动的信息窗口。

GInfoWindow对象没有构造函数。当创建地图时,会自动创建一个信息窗口并将其附加到地图上。对于指定的地图,一次不能显示多个信息窗口,但可以移动信息窗口并可以更改其内容(如果需要的话)。

GMap2对象提供了openInfoWindow()方法,该方法将一个点和一个 HTML DOM 元素作为参数。HTML DOM元素附加到信息窗口容器中,信息窗口的尖端会固定在指定点上。

GMap2 的 openInfoWindowHtml()方法相似,但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。

要创建信息窗口,请调用openInfoWindow方法,并向其传递位置和要显示的 DOM 元素。下面的示例代码显示了一个信息窗口,该窗口锚定在地图中心,内容为一条简单消息“Hello, world”。(参考示例:MyTest4.html)

var map = new GMap2(document.getElementById("mapContainer"));

map.setCenter(new GLatLng(39.970981,116.314108), 16);

map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, World!"));

有关信息窗口的完整文档,请查阅Google Map API参考.

转载于:https://www.cnblogs.com/greywolf/archive/2012/08/02/2619595.html

你可能感兴趣的文章
实战:微信小程序支付开发具体流程
查看>>
Rancher 2.2.4发布,CVE修复,项目监控回归!
查看>>
MySQL主从复制
查看>>
JDBC 批处理
查看>>
你刚吃的兰州牛肉面_背后就藏着大数据
查看>>
java.lang.OutOfMemoryError: PermGen space内存溢出
查看>>
源代码数据安全加密技术分析
查看>>
SEO专题之整合营销搜索
查看>>
智慧农业云平台APP[中易云智慧农业物联网]
查看>>
使用join工具进行弱口令检测
查看>>
配置nginx防盗链和HTTPS
查看>>
shell脚本基础----变量
查看>>
软件入门的知识之程序设计语言Java和C#的简单介绍和对比[图]
查看>>
精益生产中实现高效现场管理的意义是什么?
查看>>
ceph
查看>>
逸管家诚信是企业的立业之本
查看>>
丧心病狂的Android混淆文件生成器
查看>>
第五课 《对读者的准确定位》
查看>>
1、git linux 源码安装
查看>>
Python使用赤舞代理的socks5采集实例
查看>>