<![CDATA[Fovly 府吏网 Field Of View,Lean Yourself - Google]]> http://www.fovly.com/ zh-cn PBlog2 v2.4 Fovly 府吏网 Field Of View,Lean Yourself http://www.fovly.com/images/logos.gif http://www.fovly.com/ Fovly 府吏网 Field Of View,Lean Yourself http://www.fovly.com/article.asp?id=417 <![CDATA[谷歌地图卫星发射 将提供50厘米分辨率图像]]> yamunchien@qq.com(fovly) Fri,10 Oct 2008 08:29:36 +0800 http://www.fovly.com/default.asp?id=417

GeoEye-1卫星由德尔塔2型火箭发射升空

GeoEye首席执行官马修·奥康尼尔(Matthew O'Connell)周六表示：“GeoEye-1已经发射成功，我们已掌握了该卫星的控制权……GeoEye-1已对我们发出的命令作出反应。”他表示，今后30~45天内，GeoEye将对GeoEye-1进行调试和校准工作，然后该卫星就可向GeoEye传回高分辨率图像。


据悉，GeoEye-1能以0.41米黑白(全色)分辨率和1.65米彩色(多谱段)分辨率搜集图像，目标定位精度可达3米。换句话说，GeoEye-1为当今全球能力最强、分辨率和精度最高的商业成像卫星。受美国政府的相应规定，无论是GeoEye或谷歌等商业公司，都只能对外提供50厘米的分辨率图像。前不久GeoEye与谷歌签订了图像提供协议。


据悉，GeoEye-1将距离地面423英里处拍摄数字图像，飞行速度为每秒4.5英里。GeoEye-1由一枚德尔塔2型火箭发射升空。GeoEye发言人布赖恩·奥肖尼斯(Brian O'Shaughnessy)透露，谷歌两位创始人拉里·佩奇(Larry Page)和塞吉·布林(Sergey Brin)周六在现场观看了发射过程。


GeoEye其他卫星也向谷歌、微软和雅虎提供数字图像，但仅向谷歌提供在线地图服务所需大量图像。奥肖尼斯援引佩奇和布林的表述称，今后数月内，谷歌地图将向用户提供GeoEye-1传回的高分辨率图像。(编译/中涛)


谷歌投资高精度成像卫星拍出首张图片
北京时间10月9日消息，据国外媒体报道，由谷歌(Google)参与投资、全球清晰度最高的商用成像卫星“GeoEye-1”本周开始进行其图片拍摄活动，它拍摄的第一张图片是美国宾夕法尼亚州的库茨敦大学(Kutztown University)鸟瞰图。


据悉，GeoEye-1重量为4300磅，它拍摄这张图片的时间为美国东部时间10月7日中午，当时该卫星正以每小时1.7万英里(相当于每秒4.5英里)的速度，在距离地面423英里的轨道上由北极向南极运动。GeoEye公司通信和市场副总裁马克·布伦德(Mark Brender)透露，该卫星空中拍摄精度可以精确到41厘米——这意味着足够放大一个棒球场内的本垒区。


虽然GeoEye-1卫星服务因谷歌参与投资而备受关注，但其主要客户并非谷歌，而是一家政府机构——美国国家地测空间情报局(NGA)，该机构主要从事美国国家安全所需的图像分析。在GeoEye-1卫星5.02亿美元的研发经费中，NGA承担了一半费用，并承诺购买其影像产品，而谷歌只不过是GeoEye的第二大投资人。


布伦德近日在接受外界电话采访时表示：“GeoEye绝对不是间谍卫星，因为间谍不会将相关图片资料放到网上出售，我们只不过是提供地球成像卫星服务而已；任何一家有地理测量、监控、绘图需求的客户，都可以购买我们提供的图片。”


自上个世纪70年代末以来，美国军方一直在使用高清间谍卫星。这些卫星甚至能够看清莫斯科红场上所出售报纸的新闻标题。直到最近数年中，这些军事技术才逐渐转向民用，并大幅提升了图片拍摄覆盖范围和清晰度。举例来说，谷歌2004年刚刚推出谷歌地图(Google Earth)服务时，其图像还比较模糊。但到了2006年3月，全球三分之一公众已能够从该服务中查看自己居所的高清晰度鸟瞰图。


当然谷歌地图服务也受到一定限制。布伦德称，受美国政府管制，虽然GeoEye公司可向NGA提供最高43厘米清晰度的图片，但只能向谷歌提供50厘米清晰度的相应图片。尽管如此，由于谷歌目前为GeoEye的独家商用合作伙伴，意味着近期内只有谷歌能够在其地图服务网站提供来自GeoEye-1的图片。


布伦德接着表示：“以前卫星拍摄技术由美国政府掌握，我们正努力实现其商用化目标。事实上，互联网、全球定位系统(GPS)和电信等业务以前也是政府专用，后来才逐渐转向民用。与此相类似，我们正努力推动卫星图片的民用化进程。”


作为全球精度最高的商用成像卫星，GeoEye-1于今年9月6日在美国加州范登堡空军基地发射升空，此后一直在进行镜头校验活动。布伦德透露，GeoEye第二颗成像卫星GeoEye-2有望于2011年到2012年期间发射，该卫星的图片最高清晰度可达到25厘米。尽管如此，由于美国政府的相应管制规定，谷歌地图的清晰度今后仍将维持在50厘米水平。(编译/中涛)

]]> http://www.fovly.com/article.asp?id=406 <![CDATA[Google Maps API 例子]]> yamunchien@qq.com(yamunchien) Mon,01 Sep 2008 20:30:18 +0800 http://www.fovly.com/default.asp?id=406
这篇文章主要要介绍如何利用 Google Maps API 来把 Google 所提供的地图服务内嵌到你的网页中，看过这篇介绍后，你会发现这是多么简单的一件事情。如果你有兴趣，不妨一起讨论讨论，或许你也可以想出很有创意的应用来。


目录：
申请一组 Google Maps API Key  
第一个范例：在网页嵌入 Google Maps
增加其它信息：Marker，InfoWindow 或是 Polyline  
浏览器兼容性问题  
其它资源  
版权宣告  
申请一组 Google Maps API Key
在使用 Google Maps API 之前，你必须向 Google 申请到一组 Key，申请的方法很简单：
首先，先决定你的网页会出现在哪个 URL，例如我想把 Google Maps 嵌入到我的 blog 中，我可以先知道该网页的 URL 应该会是 ，前面包含到最后一个目录的字符串便是要来申请 Key 的基准，也就是。  
以你的帐号登入 Google，如果你还没有帐号，请到 https://www.google.com/accounts/ 申请。  
连到 Google Maps API Sign Up 网页将 (1) 所决定的 URL 填入，并按 "Generate API Key" 取得 Key。  
最后会出现三个方块，分别是你取得的 Key，你指定的 URL，以及一个范例。建议是将范例中的 <script src="..."></script> 整行 Copy/Paste 下来。  

Goole Maps API 使用上有些法律上的限制要注意：
你的 Google Maps 服务必须免费开放给一般使用者。  
如果你预估你的地图服务会有超过每天 50,000 笔页面的存取量，请主动联络 Google。  
Google 会不定期更新 API，你有责任跟着更新你的网页中的 API。  
你不能更改或隐藏 Google 的 logo。  
Google 有权力以后在地图上放广告，而你不能更改或破坏这些广告。  
有些地图应用是 Google 不希望看到的，例如指明哪些地方可以购买到毒品或是任何违法行为。  
这些限制我想一般简单的应用都不太会触及，目前为止，Google 也尚未在地图上摆放广告。


第一个范例：在网页嵌入 Google Maps
当你取得一把 API Key 之后，我们就可以来写第一个范例了，这个范例相当简单：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
      //]]>
   </script>
</html>
看范例所呈现的结果
第一行红字的部分就是用你取得的 Key 去加载 Google Maps API，这里要注意的是，你一定要用你自己的 URL 去取得这把 Key，否则网页在加载时，会得到错误讯息。接下来，宣告一个 div 区块用来摆置地图，style="width: 300px; height:300px" 则是用来指定地图区块大小。

再来利用 var map = new GMap (document.getElementById("mymap")); 宣告一个 GMap 对象。而 map.centerAndZoom(new GPoint(139.7600, 35.6700), 1); 则是将地图的中心点固定在经度 139.7600 和纬度 35.6700，而 Zoom Level 在这范例中设成 1 (1 为最大，数字越大 Zoom Level 越小)。在这边你或许会有个疑问，要怎么知道某个地点的经纬度？如果你是在美国或加拿大，有些网站会提供依照地址查询经纬度的服务，但是其它国家就比较麻烦了，而我有个比较简单的方法你可以参考看看，也就是先利用 Google Maps 的大地图找到你要的地点，将他固定在中间，然后按下网页上的 Link to this page，这时候 Google Maps 就会显示出这页的 URL，URL 上就有该点的经纬度了，举例来说，我想要找出日本京都车站的经纬度，我先用 Google Japan Maps 找到车站位置，并将他固定在中心，最后并取得连结：http://maps.google.co.jp/maps?ll=34.982050,135.761490&spn=0.012443,0.020262&hl=ja，红字所标的就是京都车站的经纬度。

这个范例中，你有没有觉得是不是少了什么？那就是少了 Google Maps 中的控件，没有这个你没办法放大缩小地图，也没办法切换卫星空照图。如下范例你就可以在你的地图中加入这两个控件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
      //]]>
   </script>
</html>
看范例所呈现的结果
Google Maps API 内建四种控件：
GLargeMapControl : 适合给大型地图的控件。  
GSmallMapControl : 适合给小型地图的控件。  
GSmallZoomControl : 只有 Zoom Level 的调整，没有地图移动控制。  
GMapTypeControl : 显示地图型态切换的控件。  
至于要用什么控件，你可以依照你所提供的地图大小以及用途而定，每一种都试看看吧。


增加其它信息：Marker，InfoWindow 或是 Polyline
Google Maps API 好玩的地方是在于我们可以在地图上面加很多东西，API 也提供一些基本的组件，包含你可以标示一个点，显示信息，甚至在地图上画线。  
GMarker
先看看下面这个范例：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
  
  var KyotoStation = new GMarker (new GPoint (135.761404, 34.982823));
         map.addOverlay (KyotoStation);
  
      //]]>
   </script>
</html>
看范例所呈现的结果
我在这个范例中设立了一个 Marker 标示出京都车站的位置，京都车站经纬度取得的方式如前面所述，最重要的是要新增加一个 GMarker 对象，并将此 Marker 对象加入到 map 对象中。你也可以在地图上标示好几的 Marker，甚至可以用自订的 icon 来标示。

Info Window
除了标示地点外，你也可以在 Marker 上显示额外的信息。  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
  var KyotoStation = new GMarker (new GPoint (135.761404, 34.982823));
  
         GEvent.addListener (KyotoStation, "click", function() {
            KyotoStation.openInfoWindowHtml ("日本京都车站");
         });
  
         map.addOverlay (KyotoStation);
      //]]>
   </script>
</html>
看范例所呈现的结果
上面这个程序，在当使用者点了该 Marker 时会出现一个方匡显示你输入的文字，这文字可以是 HTML 格式，也就是说允许上面出现图片等信息。那可不可以不用去等到使用者点了之后才出现，可不可以在加载时就出现呢？好象是不行的，至少我测试的结果都会得到一些错误讯息。不过你可以这样做：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(135.758486, 34.985320), 3);
  
         map.openInfoWindow (new GPoint(135.761404, 34.982823), document.createTextNode("日本京都车站"));
  
         map.addOverlay (KyotoStation);
      //]]>
   </script>
</html>
看范例所呈现的结果
直接在地图上显示 Info Window，而不是在 Marker 上。但是 GMap 对象并没有 openInfoWindowHtml() Function，只有 openInfoWindow() 可以用，而这个 Function 是以一个 DOM 对象作为参数，而非 HTML 格式的字符串内容。  
GPolyline
在地图上画线，这更酷了，请看以下范例：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>

<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>

<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
  var map = new GMap(document.getElementById("mymap"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.centerAndZoom(new GPoint(135.770159, 34.986128), 3);
  
var points = [new GPoint(135.762649, 34.984124), new GPoint(135.762563, 34.986128), new GPoint(135.777369, 34.985952), new GPoint(135.778806, 34.990910)];
var line = new GPolyline(points, "#ff0000");
        map.addOverlay(line);
  
      //]]>
   </script>
</html>
看范例所呈现的结果
OK，这个范例要告诉你如何从京都车站搭公车到音羽山清水寺。我设定了一串的 GPoint 对象数组，每个点都是线条转折处，并利用此数组新增了一个 GPolyline 对象，并将这 polyline 加到地图中即可(你也可以自订 Polyline 的颜色及大小)。你或许还会注意到这个范例多了一些奇怪的东西，一个 namespace 以及一个 CSS style 设定，这是为了 IE 浏览器的兼容性而加的，关于这个稍后会再提到。


浏览器兼容性问题
Google Maps API 基本上没有什么浏览器兼容性的问题，他支持的浏览器有：
Firefox/Mozilla  
IE 5.5+  
Safari 1.2+  
Opera  
除此外，你也可以利用 GBrowserIsCompatible() 函式来检查使用者的浏览器是否有兼容性上的问题。例如，你可以这样做：  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAuG7oWOtWqEZB1PNN_pEvsBQ5_R83DoQvDaRjoUU
cz5SOzE95uxQPI9Bh8GLJN8gz2X_Ib6OP9qcsVQ" type="text/javascript"></script>
</head>
<body>
   <div id="mymap" style="width: 300px; height: 300px"></div>
   <script type="text/javascript">
      //<![CDATA[
         if (GBrowserIsCompatible()) {
     var map = new GMap(document.getElementById("mymap"));
     map.centerAndZoom(new GPoint(139.7600, 35.6700), 1);
  } else {
     var map = document.getElementById ("mymap");
     map.innerHTML = "";
            map.innerHTML = "Sorry, 你的浏览器不支持 Google Maps";
  }
      //]]>
   </script>
</html>
看范例所呈现的结果

另外，如果你有用到 GPolyline 对象，为了能够在 IE 上也能够正确显示，你必须引用微软的 VML namespace 以及增加一个 CSS Style 来正确显示 VML，关于这个请参考：http://msdn.microsoft.com/library/default.asp?url=/workshop/author/VML/ref/appendix.asp，但是如果是只针对 Firefox/Mozilla 等浏览器则无此困扰。
]]>