<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Marshal&#039;s Blog &#187; gwt html5</title>
	<atom:link href="http://marshal.easymorse.com/archives/tag/gwt-html5/feed" rel="self" type="application/rss+xml" />
	<link>http://marshal.easymorse.com</link>
	<description>It&#039;s swap of marshal&#039;s memory.</description>
	<lastBuildDate>Mon, 30 Jan 2012 07:03:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>gwt使用html5的Geolocation api</title>
		<link>http://marshal.easymorse.com/archives/2228?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=gwt%25e4%25bd%25bf%25e7%2594%25a8html5%25e7%259a%2584geolocation-api</link>
		<comments>http://marshal.easymorse.com/archives/2228#comments</comments>
		<pubDate>Fri, 22 Jan 2010 09:10:32 +0000</pubDate>
		<dc:creator>Marshal</dc:creator>
				<category><![CDATA[计算机技术]]></category>
		<category><![CDATA[gwt]]></category>
		<category><![CDATA[gwt html5]]></category>
		<category><![CDATA[gwt html5 geolocation]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[html5 geolocation]]></category>

		<guid isPermaLink="false">http://marshal.easymorse.com/archives/2228</guid>
		<description><![CDATA[html5提供geolocation api，用于获取浏览器所处地理位置相关信息。 通过pc上面的chrome/firefox访问获得的经纬度，发现还是很准的。 获得经纬度，可以通过： http://maps.google.com/ 在输入框中输入：纬度,精度，就可以得到对应的卫星图或者地图。 代码编写也很容易，这里使用了gwt，其实即使不使用gwt，写javascript也很简单。 这里使用的gwt模块，文档地址在： http://code.google.com/p/gwt-mobile-webkit/wiki/GeolocationApi 下载地址： http://code.google.com/p/gwt-mobile-webkit/downloads/list 选择gwt-html5-geolocation-xxx.tar.gz。解压缩，将其中的.jar文件部署到gwt项目的classpath下。 在模块的配置文件中，增加： &#60;inherits name=&#34;com.google.code.gwt.geolocation.Html5Geolocation&#34; /&#62; 代码： public void onModuleLoad() { &#160;&#160;&#160; if (Geolocation.isSupported()) { &#160;&#160;&#160;&#160;&#160;&#160;&#160; Geolocation geo = Geolocation.getGeolocation(); &#160;&#160;&#160;&#160;&#160;&#160;&#160; if (geo != null) { &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; geo.getCurrentPosition(new PositionCallback() { &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; @Override &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; public void onFailure(PositionError error) { &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Window.alert(&#34;error&#34;); &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; } &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; @Override &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>html5提供geolocation api，用于获取浏览器所处地理位置相关信息。</p>
<p><a href="http://marshal.easymorse.com/wp-content/uploads/2010/01/07FK8AOPQO4ZB0L.jpg" rel="lightbox"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="$(07FK8}AOP]%%QO4ZB``0L" border="0" alt="$(07FK8}AOP]%%QO4ZB``0L" src="http://marshal.easymorse.com/wp-content/uploads/2010/01/07FK8AOPQO4ZB0L_thumb.jpg" width="257" height="260" /></a></p>
<p>通过pc上面的chrome/firefox访问获得的经纬度，发现还是很准的。</p>
<p>获得经纬度，可以通过：</p>
<blockquote><p><a href="http://maps.google.com/">http://maps.google.com/</a></p>
</blockquote>
<p>在输入框中输入：<em>纬度,精度</em>，就可以得到对应的卫星图或者地图。</p>
<p>代码编写也很容易，这里使用了gwt，其实即使不使用gwt，写javascript也很简单。</p>
<p>这里使用的gwt模块，文档地址在：</p>
<blockquote><p><a href="http://code.google.com/p/gwt-mobile-webkit/wiki/GeolocationApi">http://code.google.com/p/gwt-mobile-webkit/wiki/GeolocationApi</a></p>
</blockquote>
<p>下载地址：</p>
<blockquote><p><a href="http://code.google.com/p/gwt-mobile-webkit/downloads/list">http://code.google.com/p/gwt-mobile-webkit/downloads/list</a></p>
</blockquote>
<p>选择gwt-html5-geolocation-xxx.tar.gz。解压缩，将其中的.jar文件部署到gwt项目的classpath下。</p>
<p>在模块的配置文件中，增加：</p>
<blockquote><p>&lt;inherits name=&quot;com.google.code.gwt.geolocation.Html5Geolocation&quot; /&gt;</p>
</blockquote>
<p>代码：</p>
<blockquote><p>public void onModuleLoad() {      <br />&#160;&#160;&#160; if (Geolocation.isSupported()) {       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; Geolocation geo = Geolocation.getGeolocation();       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; if (geo != null) {       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; geo.getCurrentPosition(new PositionCallback() { </p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; @Override      <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; public void onFailure(PositionError error) {       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Window.alert(&quot;error&quot;);       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; } </p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; @Override      <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; public void onSuccess(Position position) {       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Coordinates o = position.getCoords();       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; RootPanel.get().add(       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; new HTML(&quot;位置，纬度：&quot; + o.getLatitude() + &quot;，经度：&quot;       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; + o.getLongitude()+&quot;，高度：&quot;+o.getAltitude()));       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; RootPanel.get().add(       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; new HTML(&quot;精度：&quot;+o.getAccuracy()));       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; } </p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; });      <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; RootPanel.get().add(new HTML(&quot;支持Geolocation，使用&quot;+Geolocation.getProviderName()));       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; }       <br />&#160;&#160;&#160; }else{       <br />&#160;&#160;&#160;&#160;&#160;&#160;&#160; RootPanel.get().add(new HTML(&quot;对不起，您的浏览器不支持HTML5 Geolocation API。&quot;));       <br />&#160;&#160;&#160; }</p>
<p>&#160;</p>
</blockquote>
<p>看到的效果，类似这样：</p>
<p><a href="http://marshal.easymorse.com/wp-content/uploads/2010/01/image20.png" rel="lightbox"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://marshal.easymorse.com/wp-content/uploads/2010/01/image_thumb20.png" width="355" height="137" /></a> </p>
<p>目前测试的结果是：</p>
<ul>
<li>android不支持，看了文档，据说是2.0版本以后的支持，测试用的是1.5版本的g3； </li>
<li>iphone 3g，支持，OS 3.0； </li>
<li>chrome，支持； </li>
<li>firefox，支持； </li>
<li>opera，不支持； </li>
<li>safari，不支持。 </li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://marshal.easymorse.com/archives/2228/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

