[Force.comでWeb制作]VisualforceページでHTML5のGeolocationを利用

By |8月 4, 2010|Force.comでWeb制作, |0 comments


VisualforceページでHTML5のGeolocation情報を利用する方法。
参考:HTML 5 Geolocation in Visualforce

http://abeuhuru-developer-edition.na2.force.com/geolocation
サンプルコード使ってデモ作りました。

  • modernizrというライブラリを使って、ブラウザの対応を検出
  • 対応している場合、navigator.geolocation.getCurrentPositionで現在地を取得。
  • ActionFunctionでiFoundYouメソッドを実行して、outputTextタグとして緯度経度をページ上に表示

HTML5なので、iPhone/iPadでも実行可能。Nexus Oneでも実行されました。

APEX

public class locController {

 public String valueLong { get; set; }

 public String valueLat { get; set; }

 public PageReference iFoundYou() {
 // Do something interesting with the values - like persisting them to a database
 return null;
 }
}

Visualforce

 <apex:includeScript value="{!$Resource.modernizr}"/>
 <script>
 function doTheGeoThang() {
 if (Modernizr.geolocation){
 navigator.geolocation.getCurrentPosition(
 function(position) {
 findMe(position.coords.latitude,position.coords.longitude);
 }
 );
 } else {
 alert ("Your browser isn't hit. Upgrade man!");
 }
 }
 </script>

 <h3>HTML 5's Geolocation API</h3>

 <apex:form >

 <span style="cursor: pointer;"
 onclick="doTheGeoThang()">Click Me - let me find you!</span>
 <br/><br/>

 <apex:actionFunction name="findMe" action="{!iFoundYou}" rerender="jsvalues">
 <apex:param name="lat" value="" assignTo="{!valueLat}"/>
 <apex:param name="long" value="" assignTo="{!valueLong}" />
 </apex:actionFunction>

 <apex:outputPanel id="jsvalues">
 <apex:outputText value="Value lat: {!valueLat}" /><br/>
 <apex:outputText value="Value long: {!valueLong}" /><br />
 </apex:outputPanel>
 </apex:form>
</apex:page>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です