摘要: 2、使用自定义的JS和Google Map API中的GClientGeocoder类其实Google Map API中提供了一个GClientGeocoder类来实现地址译码,即实现地名与坐标的转换,这个是需要从客户端提交地名来查找数据库从而返回坐标值。先看下面的代码:var rpoint;var map = new GMap2(document.getElementById("GMapContainer"));var geocoder = new GClientGeocoder();geocoder.getLatLng(str,function(rpoint){//al 阅读全文
posted @ 2012-08-02 11:18 GreyWolf 阅读(606) 评论(0) 推荐(0) 编辑
摘要: 1、使用Google Map API中的GMap2类的控件在提到地图上的默认控件和GMap2的设置项的时候,我都提过谷歌地图的本地搜索栏控件,要在地图上加上这个控件其实很简单,不需要调用GMap2.addControl(),只需要一句话:map.enableGoogleBar();这样就可以在地图的左下角加上这个搜索栏了,并且替换掉了原来的谷歌Logo的图片。目前用这个搜索栏可以搜索两种类型的数据:1)地名;2)谷歌提供的商业数据,比如“餐馆”。默认是在当前显示的地图范围内搜索;具体的搜索结果是上面的哪种类型由你输入的关键字决定,没有什么特别的方法。搜索返回结果后会自动在地图上加上所有结果的标 阅读全文
posted @ 2012-08-02 11:17 GreyWolf 阅读(2077) 评论(0) 推荐(0) 编辑
摘要: 与地图上的控件不同,地图上的叠加层(Overlay)指的是和某个经纬度坐标绑定,能够跟随地图的缩放拖拽而相应移动的DOM元素。地图API文档里定义的GMarker、GPolyline、GInfoWindow都属于叠加层。下面主要讲一下GMarker的使用,其他都是类似的,可以参考Google Map API文档。先看下面的代码:(详细参考MyApp2.html和js/GMap.js)var marker = new GMarker(rpoint);map.addOverlay(marker);marker.openInfoWindowHtml("欢迎查看"+str+&quo 阅读全文
posted @ 2012-08-02 11:16 GreyWolf 阅读(406) 评论(0) 推荐(0) 编辑
摘要: 前面设置地图的文档里面其实漏掉了一个很有意思而又不太引人注目的地图特性,就是设置地图的快捷键。说实话,之前我也没有注意过这一点,甚至都没有想过地图可以支持快捷键,一个以拖拽成名的应用,谁又能想到可以用快捷键来控制呢?仔细看了一下,谷歌地图使用GKeyboardHandler类来支持键盘操作,更有意思的是,这个类在文档顶部的类名列表中没有出现,不知道是整理文档的疏漏,还是因为这个类太小,小的连一个方法或者参数都没有,只有光秃秃一个类充作构造函数。也可能是这个类所支持的键盘操作有限吧,我把支持的键做了个列表:方向键向对应的方向连续移动地图,同时按下邻近的两个会向对角移动;Home/End以3/4的 阅读全文
posted @ 2012-08-02 11:16 GreyWolf 阅读(307) 评论(0) 推荐(0) 编辑
摘要: 之前我曾经解释过创建一个地图的详细步骤,但是,真正创建地图的核心步骤也就两行代码:var map = new GMap2(document.getElementById("mapContainer"));map.setCenter(new GLatLng(39.970981,116.314108), 16);有这两行代码,你就可以在你的网页上展现你的谷歌地图了。但是,这个是最简单的地图,如果你想要对这个地图做一些小小的变动,更符合你的胃口,可以使用GMapOptions来尝试定制地图。简单的说,GMapOptions是你在new一个GMap2对象的时候,可以直接使用对象变量 阅读全文
posted @ 2012-08-02 11:15 GreyWolf 阅读(425) 评论(0) 推荐(0) 编辑
摘要: 初始化一个GMap2对象除了可以使用GMapOptions参数设置谷歌地图外,在创建GMap2对象后还可以用一些方法设置地图的一些通用属性:1、可以连续缩放地图缩放的时候旧图块在新图块加载完成之前不会直接消失,图块的切换比较平滑,在网速较慢的时候这种效果会好一些。地图默认情况下不支持,建议打开这个功能。使用map.enableContinuousZoom() / map.disableContinuousZoom()方法来切换。另外,需要的时候你可以使用map.continuousZoomEnabled()方法来探测一下地图是否支持连续缩放。2、支持滚轮缩放使用鼠标滚轮来实现地图缩放,默认也是 阅读全文
posted @ 2012-08-02 11:14 GreyWolf 阅读(607) 评论(0) 推荐(0) 编辑
摘要: 地图上的控件一般是指悬浮在地图上、不随地图移动的图片、按钮等等DOM元素,可以用来控制地图、帮助用户和地图交互、显示地图的特定信息和状态。在谷歌地图主页上,有可以控制地图缩放的控件、有切换地图类型的控件、有显示缩略图的控件等等,这些控件在地图API里默认也都是提供的,所以,你可以在你的地图上加上这些控件,并且可以根据你的需要随意调整地图控件的位置、改变控件的外观,就像我在右边的地图上把缩放控件移到右上角而不是默认的左上角、并且使用了一个微型化的外观。下面先看看可以在地图上添加哪些控件吧。地图API中默认控件的种类1、地图缩放控件 缩放控件是可以控制地图移动和放大级别的,默认有三种: 1) 全功 阅读全文
posted @ 2012-08-02 11:13 GreyWolf 阅读(462) 评论(0) 推荐(0) 编辑
摘要: 要在自己的网页中嵌入地图,常用的方法可以归纳为以下几种:1、最简单的方法——使用谷歌地图主页的"链接"如果你只需要在自己的页面上显示某个特定范围的地图,比如你的公司所在地,但是不需要在地图上添加任何额外的内容,比如标记、折线等等,那么,使用这个方法来嵌入谷歌地图是最简单的。登录谷歌地图主页,定位你需要显示的范围后,点击地图左上角的“链接”,会出现一个信息框,给出两个输入框,把第二个输入框中的内容拷贝到你的页面上就可以了。其实,这段嵌入代码就是一个iframe的声明,所以,虽然地图主页提供一个自定义地图并预览的功能,但是只能自定义地图的大小,如果需要的话,我们完全可以通过手动 阅读全文
posted @ 2012-08-02 11:12 GreyWolf 阅读(514) 评论(0) 推荐(0) 编辑
摘要: 使用谷歌地图API定义自定义的控件其实非常简单,看看网页,这就是一个自定义的控件。先看一段Hello World的代码function MyControl(){}MyControl.prototype = new GControl();MyControl.prototype.initialize = function(map){this.map = map;var container = map.getContainer();var label = document.createElement("div");container.appendChild(label);labl 阅读全文
posted @ 2012-08-02 11:12 GreyWolf 阅读(328) 评论(0) 推荐(0) 编辑
摘要: 还需要关心的几个问题:上面的示例代码仅仅是为了显示一个试验性质的简单地图,所以把很多暂时不是很必要的代码都去掉了,如果你需要创建具有很好的兼容性、并且能够发布到你自己的网站上的地图,还需要注意这几个问题:为了保证有足够的兼容性,谷歌建议使用XHTML来定义显示地图的html页面,所以,你需要在这个页面的顶部声明XHTML的DOCTYPE,并且在html中声明XHTML的命名空间<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtmll/DTD/xht 阅读全文
posted @ 2012-08-02 11:11 GreyWolf 阅读(290) 评论(0) 推荐(0) 编辑
摘要: 在网页MyTest1.html中我们已经使用了JavaScript来创建地图,下面总结一下使用JavaScript创建一个地图的核心步骤:1、导入地图API类库。<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=YOUR_API_KEY"type="text/javascript"></script>注意这里的参数key,我在以前的文章里已经详细解释过了,如果你只是在本地运行,暂时可以随便使用一段字符串。2、在页面的body 阅读全文
posted @ 2012-08-02 11:10 GreyWolf 阅读(382) 评论(0) 推荐(0) 编辑
摘要: 要在地图中定位一个点,最常见的就是使用一个地理坐标来定位。但是,谷歌地图API还提供了不同于地理坐标的多套坐标系统,方便我们在需要的时候使用不同的坐标来定位在地图上显示的信息。这些坐标系统可以简单的总结如下:1、地理坐标系统地理坐标纵向以赤道所在纬度线为原点,分别向南北极延伸,最大值为90。横向以格林威治天文台旧址所在的经度线(本初子午线)为原点,分别向东西延伸,最大值为180。海拔坐标在这里就暂时忽略。地理坐标的表示方式主要有两种:一种是以度分秒/度分的方式表示,比如(39°56'N,116°20'E);还有一种是使用十进制数的方式表示,比如(39.933 阅读全文
posted @ 2012-08-02 11:09 GreyWolf 阅读(617) 评论(0) 推荐(0) 编辑
摘要: 4、DOM相对坐标系统这里的DOM是指页面上装载地图的容器,一般是div元素。把这个坐标系统看作是基于DOM元素而不是基于地图的坐标系统或许更易于理解,这个系统里的坐标指定的是某个点在这个DOM容器里的位置,以这个容器的左上角为原点,分别向下(Y轴)和向右(X轴)延伸。所谓相对坐标,是指这个坐标系统相对地图是固定的,原点不会随地图的拖拽而变化。在谷歌地图API中,使用GMap2.fromLatLngToContainerPixel(latlng)可以取得地图上某个点在DOM容器中的位置,相反,你可以通过GMap2.fromContainerPixelToLatLng(pixel)方法来获取DO 阅读全文
posted @ 2012-08-02 11:09 GreyWolf 阅读(422) 评论(0) 推荐(0) 编辑
摘要: 谷歌地图的API类库是通过script标签导入的,形式如下:<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=YOUR_API_KEY"type="text/javascript"></script>我们使用API的时候关心的就是这个script的src属性了,这个属性也就两个部分:路径:http://ditu.google.com/maps;参数:file=api&hl=zh-CN&v=2&key= 阅读全文
posted @ 2012-08-02 11:08 GreyWolf 阅读(526) 评论(0) 推荐(0) 编辑
摘要: 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.g 阅读全文
posted @ 2012-08-02 11:07 GreyWolf 阅读(334) 评论(0) 推荐(0) 编辑
摘要: 所谓API密钥(API Key),其实就是一个字符串,在使用script标签导入API类库的时候作为请求参数传给谷歌地图的服务器,形式就是:<script src="http://ditu.google.com/maps?file=api&v=2&key=YOUR_API_KEY" type="text/javascript"></script>使用谷歌地图API的第一步就是要注册一个API密钥,谷歌的API使用条款对这个密钥的用途有很正式的说明,其实总结起来也很简单:1、谷歌地图API提供的服务是免费的,对于通过 阅读全文
posted @ 2012-08-02 11:07 GreyWolf 阅读(521) 评论(0) 推荐(0) 编辑
摘要: 6、构造函数说明GMap2(container, opts)在通常是一个DIV元素的指定HTML container内创建新地图。您也可以通过opts参数传递GMap2Options类型的可选参数。请注意因为JavaScript是松散类型的语言,我们可以不填写构造函数的任何可选参数,此处未这样做。7、初始化地图map.setCenter(new GLatLng(39.970981,116.314108), 16);通过GMap2构造函数创建地图后,我们需要再做一件事:将其初始化。初始化通过地图的setCenter()方法完成。setCenter()方法要求有GLatLng坐标和缩放级别,而且必 阅读全文
posted @ 2012-08-02 11:06 GreyWolf 阅读(420) 评论(0) 推荐(0) 编辑
摘要: 1、简介任何Google Maps API应用程序中的基础元素都是“地图”本身。本文档讨论GMap2基础对象的用法和地图操作的基础知识。2、Google Map的“Hello, World”开始学习Google地图API最简单的方式是看一个简单的示例。网页MyTest1.html显示了以中国人民大学为中心的400x400的地图。即使在此简单的示例中,也需要注意五点:(1)使用script标签包含Google地图API JavaScript。(2)创建名为“mapContainer”的div元素来包含地图。(3)编写JavaScript函数创建“map”对象。(4)将地图的中心设置为指定的地理点 阅读全文
posted @ 2012-08-02 11:05 GreyWolf 阅读(513) 评论(2) 推荐(0) 编辑
摘要: Google Map API中文使用说明如下:(详见js/fGMap.js文件)方法以及相关参数说明:(1)GBrowserIsCompatible() -- 是否支持Google Map API(2)myLat – 目标位置的经度坐标,(3)myLng – 目标位置的纬度坐标(4)new GLatLng(myLat, myLng) -- 设置经纬度(5)map.setCenter(new GLatLng(myLat, myLng), 14) -- 设置地图默认的中心点经纬度(6)new GLatLng(myLat, myLng) -- 设置中心点的经纬度(7)14 -- 地图的默认缩放比例大 阅读全文
posted @ 2012-08-02 11:04 GreyWolf 阅读(478) 评论(0) 推荐(0) 编辑
摘要: 一、谷歌地图主页谷歌地图对应不同的地区都会有一些专门的主页,首次登陆时会显示这些地区。比如,香港的:http://maps.google.com.hk,台湾的:http://maps.google.com.tw,日本的:http://maps.google.co.jp。不过,我们常用的也就三个:1、http://maps.google.com 这个是谷歌地图的全球主页,默认显示美国地图,拖拽到不同地区会对应显示不同语言版本的地图,不过目前对中文数据搜索支持的不如下面正式的中文主页;2、http://ditu.google.com 这个是谷歌地图的中文主页,Google Map API就是基于这 阅读全文
posted @ 2012-08-02 11:01 GreyWolf 阅读(493) 评论(0) 推荐(0) 编辑