google maps学习文档.docx
- 文档编号:30228281
- 上传时间:2023-08-07
- 格式:DOCX
- 页数:24
- 大小:197.67KB
google maps学习文档.docx
《google maps学习文档.docx》由会员分享,可在线阅读,更多相关《google maps学习文档.docx(24页珍藏版)》请在冰豆网上搜索。
googlemaps学习文档
googlemaps学习文档
基础工作
一、准备工作:
1、学习环境:
MyEclips8.5+Tomcat6.0+数据库待定
2、申请APIKey,并且要绑定要嵌入地图的网页网址。
申请key的网址:
3、在MyEclipse中建立项目。
导入googlemapsAPI,语句为:
//localhost:
8080/googlemap/first.jsp上。
4、关于显示中文的问题:
googlemap支持的charset=utf-8,不支持gb2312等。
在网页中显示中文,添加语句
<%@pagelanguage="java"pageEncoding="utf-8"%>。
二、加载地图:
1、创建地图容器:
一般用div即可
800px;height: 500px">
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.
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.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- google maps学习文档 maps 学习 文档
![提示](https://static.bdocx.com/images/bang_tan.gif)