[Force.comでWeb制作]VisualforceページでHTML5のGeolocationを利用
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
[php]
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;
}
}
[/php]
Visualforce
[php]
<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>
[/php]