google maps学习文档.docx

2、创建GMap2（）对象：

newGMap2（容器id，opts）;一般第二个参数可以省略。

3、设定地图中心坐标并显示地图：

GMap2.setCenter（point,zoomlevel,opts）

谷歌地图坐标系统总结

转自:

要在地图中定位一个点，最常见的就是使用一个地理坐标来定位。

但是，谷歌地图API还提供了不同于地理坐标的多套坐标系统，方便我们在需要的时候使用不同的坐标来定位在地图上显示的信息。

我在右边的地图中演示了这些坐标，可以把的鼠标移到地图上看看，注意要展开“鼠标位置”的内容。

这些坐标系统可以简单的总结如下（这些系统是我自己命名的，呵呵，有些系统我也不知道应该怎么称呼）：

1、地理坐标系统

地理坐标纵向以赤道所在维度线为原点，分别向南北极延伸，最大值为90。

横向以格林威治天文台旧址所在的经度线（本初子午线）为原点，分别向东西延伸，最大值为180。

海拔坐标在这里就暂时忽略吧。

地理坐标的表示方式主要有两种：

一种是以度分秒/度分的方式表示，比如（39°56'N，116°20'E）；还有一种是使用十进制数的方式表示，比如（39.9333，116.3333）。

在表示一个地理坐标的时候，习惯上都使用先维度后经度的顺序来描述一个坐标，并且，对前一种坐标，是使用追加字母缩写的方式表示方向，而在后一种方式中，一般会使用X轴表示经度，Y轴表示维度，按照上北下南左西右东的的原则来给坐标加上对应的符号，所以，对（39.9333，116.3333）我们通常就理解为北纬39.9333度、东经116.3333度。

在谷歌地图API中使用后一种方式来表示地理坐标，并使用GLatLng这个类来规范的定义一个地理坐标，该类的构造函数中，第一个参数是维度，第二个参数是经度。

需要注意的是，这两个参数的顺序不同于我们在坐标系中先X后Y的表达方式，而是按照地理坐标先维度后经度的习惯来表示一个地理坐标，这个原则基本适用于地图API中所有需要表达地理坐标的地方。

2、图块坐标系统

谷歌地图是使用一系列的大小相同的图片拼接起来的，这些图片在谷歌地图中称之为图块（Tile）。

所以，你可以把谷歌地图理解为是使用图块/图片填充起来的一系列网格，在不同的缩放级别，地图被分解为不同数目的网格。

详细的说，在缩放级别为0的时候，整个世界地图只有一个网格，缩放级别每增大一级，所有的网格在横向和纵向就分割一次，也就是说，对应于某一特定的缩放级别N，网格的数目就是4的N次方，即4N。

这些网格所组成的坐标系统，就是图块坐标系统。

在图块坐标系统中，以缩放级别为0时的世界地图为原点，在缩放级别增大的时候分别向下（Y轴）和向右（X轴）延伸，这样，在指定的缩放级别，我们就可以用一个坐标来指定特定的图块了，如果你有意用你自己的图片替换掉地图中的某个图块，这个坐标系统就能派上用场了。

谷歌地图API中还没有一个直接的方法可以取得图块的坐标，要取得这个坐标，你需要继续往下看。

3、像素坐标系统

上面说到谷歌地图是由一系列大小相同的图片拼接起来的，其实这些图块的大小也是固定的，都是256×256像素大小，所以，在不同的缩放级别，世界地图的像素大小也是固定，比如在缩放级别为0的时候，世界地图的像素大小就是256×256×40。

这样，在特定的缩放级别，因为世界地图的像素大小是固定的，组成世界地图的所有像素点就可以形成了一个完整的坐标系统，我们也就可以用像素坐标代替地理坐标指定地图上的某个点，这个坐标系统就是像素坐标系统。

像素坐标系统以缩放级别为0时的世界地图的左上角为原点，使用与图块坐标系统相同的X轴和Y轴，在缩放级别增大的时候分别向下和向右延伸。

像素坐标与地理坐标可以相互转换，他们之间的主要区别在于，像素坐标是平面的二维坐标，而地理坐标是曲面的二维坐标（不考虑海拔坐标）。

在谷歌地图API中，可以使用GProjection.fromLatLngToPixel（latlng,zoom）这个方法通过地理坐标得到对应的像素坐标，相反的，可以使用GProjection.fromPixelToLatLng（pixel,zoom）这个方法由像素坐标得出对应的地理坐标。

现在，我们在看看如何通过像素坐标获取对应的图块坐标。

上面已经提到每个图块都是256×256像素的固定大小，所以，使用像素坐标值除以256并取整，就可以得到这个像素坐标所在的图块坐标了。

使用代码说话：

Math.floor（x/256），x就是像素坐标的x值，这个表达式得到的结果就是像素所在图块的横坐标，纵坐标算法相同。

4、DOM相对坐标系统

这里的DOM是指页面上装载地图的容器，一般是div元素。

把这个坐标系统看作是基于DOM元素而不是基于地图的坐标系统或许更易于理解，这个系统里的坐标指定的是某个点在这个DOM容器里的位置，以这个容器的左上角为原点，分别向下（Y轴）和向右（X轴）延伸。

所谓相对坐标，是指这个坐标系统相对地图是固定的，原点不会随地图的拖拽而变化。

在谷歌地图API中，使用GMap2.fromLatLngToContainerPixel（latlng）可以取得地图上某个点在DOM容器中的位置，相反，你可以通过GMap2.fromContainerPixelToLatLng（pixel）方法来获取DOM容器中某个位置在当前地图上的坐标。

这个坐标系统在你需要在DOM容器上添加一些自定义控件并与地图交互的时候可能会有用。

5、DOM绝对坐标系统

这个坐标系统是相对上一个系统来说的，从字面可以理解为这是定位在地图上而不是相对地图的坐标系统，如果你在加载地图后只是缩放而没有拖拽地图，那么你会发现这个坐标系统和DOM相对坐标系统是重合的。

但是，一旦你拖拽地图，就会发现他们的差别了，实际效果你可以在右边的地图里试试。

结论就是，这个坐标系统的原点是与DOM容器的左上角重合的地图上的点，在拖拽地图的时候原点会随着地图变化，原点左边和上面的点使用负值表示。

这个坐标系统中的坐标和地图上的地理坐标可以用GMap2.fromLatLngToDivPixel（latlng）、GMap2.fromDivPixelToLatLng（pixel）这两个方法实现相互转换，在你自定义地图上的叠加层的时候，这两个方法就可以派上用场了。

有一个问题我还没完全理清，就是在DOM容器里出现多个世界地图的时候，也就是DOM容器足够大的容纳下多个世界地图的图块时，DOM相对坐标和DOM绝对坐标这两个系统显示的坐标似乎有点紊乱，如果你理清了，找出了规律，欢迎共享出来。

最后提一下GSize，在说到地理坐标系统的时候我提到了GLatLng，这是在谷歌地图API里对地理坐标的规范表达，而在表示非地理坐标的时候，就需要用GSize这个类了，这是对以像素为单位的坐标的规范表达，和GLatLng不同的是，它的构造函数中第一个参数表示X轴的坐标，第二个参数表示Y轴的坐标。

连接数据库：

修改tomcat下面的server.

GoogleMapAPI密钥（APIKey）的解读和使用技巧

所谓API密钥（APIKey），其实就是一个字符串，在使用script标签导入API类库的时候作为请求参数传给谷歌的地图服务器，形式就是：

我的APIKey是：

ABQIAAAAMWyR7XvYN8KE9N6m_jcU4BRlfWJrPzRGiYSzS4l55_z1ea3VShRolPwARGHvivnEFRLVGXyIlsrYpA使用谷歌地图API的第一步就是要注册一个API密钥，谷歌的API使用条款对这个密钥的用途有很正式的说明，其实总结起来也很简单：

1、谷歌地图API提供的服务是免费的，对于通过API正常使用谷歌地图的网站基本没有任何限制；

2、说“基本”没有限制的原因是，谷歌对每个API密钥对应的网站所作的地理编码/地址解析请求次数有限制，每天（24小时）的请求次数不能超过15000次；

3、不能使用谷歌地图从事任何非法的行为，否则谷歌应该能够通过这个密钥阻止你的网站使用谷歌地图；更简单的说，谷歌使用这个密钥保证能够对所有API用户/网站进行区分，方便必要的时候对“超常规”用户进行阻拦。

对于地址解析的次数限制，一般来说不会有什么影响，这里主要说API密钥，所以以后有时间可以再详细说说地址解析相关的东东。

对于API密钥，还有几点需要记下来：

1、如果使用API的页面还没有发布，只是在本地调试，可以不用密钥，随便用个字符串代替就可以了；

2、API密钥只对网站目录或者域有效，所以，虽然你是使用同一个谷歌帐号登录后注册的密钥，但是，对不同域的网页，需要用这些域分别注册不同的密钥，对于同一个域里的页面，直接拿你网站的域名注册一个，在这个域里的所有页面就可以通用这个密钥了。

还有一个关于API密钥的实际问题：

在论坛里还有人问过，同一个页面需要支持不同的域名，最简单的就是公司有一个cn域名，也有一个com域名，这怎么办？

其实，对于这种问题，可以提前先注册好不同域名对应的密钥，存在你的JS变量里面，页面加载时通过window.location得到当前请求页面的域名，通过这个域名在找到对应的密钥，然后使用script动态加载的方法加载地图API，用代码描述就是：

//事先已经注册好的密钥

varkeyMapping={host1:

key1,host2:

key2};

//实际请求页面的域名

varrequestHost=window.location.hostname;

//找到需要的密钥

varkey=keyMapping[requestHost];

//构造加载API的script

urlvarapiUrl="+key;

//使用script动态加载的方法加载地图API

varscriptTag=document.createElement（'script'）;

scriptTag.setAttribute（'type','text/javascript'）;

scriptTag.setAttribute（'src',apiUrl）;

document.getElementsByTagName（'head'）[0].appendChild（scriptTag）;

使用这段代码时，需要注意把你自己的JS代码中对API的各个类的调用放在API加载完成以后，详细的解释可以先google一下著名的DomReady的问题

GoogleMap上自定义标记类（继承自GOverlay）

星期四,三月26th,2009

Googlemap上的默认标记非得是一个小图标，无法再标记上加入文字，这在很多时候不能满足需要，比如查询酒店的时候，我希望标记能直接把价格显示出来。

我做了一个自定义的类，来满足这种需求。

这个类继承自GOverlay，能实现如下图的效果：

下面是这个类的实现代码。

1.var_index=1;

2.functionKMarker（latlng,tip,markerContent,clickParamer）

3.{

4.   this._latlng=latlng;

5.   this._tip=tip;

6.   this._markerContent=markerContent;

7.   this._clickParamer=clickParamer;

8.}

9.KMarker.prototype=newGOverlay（）;

10.KMarker.prototype.initialize=function（map_）{

11.   varmarkerHtml=document.createElement（‘div’）;

12.   markerHtml.setAttribute（"index",this._clickParamer["index"]）;

13.   markerHtml.innerHTML=this._markerContent;

14.   markerHtml.style.position="absolute";

15.   map_.getPane（G_MAP_MARKER_PANE）.appendChild（markerHtml）;

16.   varmarkerTip=document.createElement（"div"）;

17.   markerTip.innerHTML=this._tip;

18.   markerTip.style.position="absolute";

19.   markerTip.style.display="none";

20.   this._map=map_;

21.   map_.getPane（G_MAP_MARKER_PANE）.appendChild（markerTip）;

22. 

23.   GEvent.addDomListener（markerHtml,"click",function（）{

24.       if（markerTip.style.display=="none"）{

25.           _mapPage.viewHotelMarker（markerHtml.getAttribute（"index"））;

26.       }else{

27.           _mapPage.hiddenHotelMarker（markerHtml.getAttribute（"index"））;

28.       }

29.   }）;

30.   GEvent.addDomListener（markerTip,"click",function（）{

31.       if（markerTip.style.display=="none"）{

32.           _mapPage.viewHotelMarker（markerHtml.getAttribute（"index"））;

33.       }else{

34.           _mapPage.hiddenHotelMarker（markerHtml.getAttribute（"index"））;

35.       }

36. 

37.   }）;

38.   GEvent.addDomListener（markerHtml,"mouseover",function（）{

39.       _index++;

40.       markerTip.style.zIndex=_index;

41.       markerHtml.style.zIndex=_index;

42.   }）;

43.   GEvent.addDomListener（markerTip,"mouseover",function（）{

44.       _index++;

45.       markerTip.style.zIndex=_index;

46.       markerHtml.style.zIndex=_index;

47. 

48.   }）;

49.   this._markerHtml=markerHtml;

50.   this._markerTip=markerTip;

51.};

52.KMarker.prototype.remove=function（）{

53.   this._markerHtml.parentNode.removeChild（this._markerHtml）;

54.   this._markerTip.parentNode.removeChild（this._markerTip）;

55.};

56.KMarker.prototype.copy=function（）{

57.   returnnew（this._latlng,this._tip,this._markerContent,this._clickParamer）;

58.};

59.KMarker.prototype.redraw=function（force）{

60.   if（force）

61.   {

62.       varp=this._map.fromLatLngToDivPixel（this._latlng）;

63.       this._markerHtml.style.left=（p.x）+"px";

64.       this._markerHtml.style.top=（p.y）–25+"px";

65.       this._markerTip.style.left=（p.x）+16+"px";

66.       this._markerTip.style.top=（p.y）–24+"px";

67.   }

68.};

69. 

70.KMarker.prototype.getMarkerHtml=function（）{

71.   returnthis._markerHtml;

72.}

73. 

74.KMarker.prototype.getMarkerTip=function（）{

75.   returnthis._markerTip;

76. 

使用方式：

varmarker=newKMarker（newGLatLng（Number（hotel.latitude）,Number（hotel.longitude））,tipTemp,markerTemp,{"index":

index}）;

map.addOverlay（marker）;

 第一个参数是GLatLng类的一个对象，也就是该标记所在经纬度位置。

tipTemp是标记的打开后的HTML模板，markerTemp是标记的HTML模板。

{"index":

index}是标记的编号。

我在上图效果中的模板也发上来,其中id=markerTemp是标记的HTML，id=hotelTemplate的是标记弹出后的HTML。

1. 

none;">

2.   

3.       

4.           

5.               

"onclick="_mapPage.viewHotelDetail（‘_hotel_passport_’,'_hotel_category_name_’）;">

6.                   _hotel_name_

7.               _star_desc_

8.           地址：

_hotel_address_

9.       

10.       

11.           

12.               _hotel_index_

13.               

14.                   参考价:

_hotel_price_

15.               

16.               

">

17.                   _last_update_time_前

18.               

19.               

• 20.                   

  21.                         onclick="_mapPage.viewHotelDetail（‘_hotel_passport_’,'_hotel_category_name_’）;">

  22.                       预订

  23.                   

  24.               

25.           

26.       

27.