无涯教程-HTML5 - watchPosition()函数

62 阅读1分钟

watchPosition方法检索有关设备当前地理位置的定期更新。该位置表示为一组地理坐标以及有关航向和速度的信息。

位置信息在Position对象中返回。每次更新都会返回一个新的Position对象。

watchPosition() - 语法

这是此方法的语法-

watchPosition(showLocation, ErrorHandler, options);

这是参数的详细信息-

  • showLocation    - 这指定了检索位置信息的回调方法。该方法与与 Position 对象相对应的对象异步调用,该对象存储返回的位置信息。

  • ErrorHandler    - 此可选参数指定在处理异步调用时发生错误时调用的回调方法。该方法由 PositionError 对象调用,该对象存储返回的错误信息。

  • options               - 此可选参数指定一组用于检索位置信息的选项。

watchPosition() - 返回值

watchPosition方法返回与异步调用关联的唯一事务ID(数字)。使用此ID取消watchPosition调用并停止接收位置更新。

<!DOCTYPE HTML>

<head> <html>

  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="kwd">var</span><span class="pln"> watchID</span><span class="pun">;</span><span class="pln">
     </span><span class="kwd">var</span><span class="pln"> geoLoc</span><span class="pun">;</span><span class="pln">
     
     </span><span class="kwd">function</span><span class="pln"> showLocation</span><span class="pun">(</span><span class="pln">position</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> latitude</span><span class="pun">=</span><span class="pln">position</span><span class="pun">.</span><span class="pln">coords</span><span class="pun">.</span><span class="pln">latitude</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> longitude</span><span class="pun">=</span><span class="pln">position</span><span class="pun">.</span><span class="pln">coords</span><span class="pun">.</span><span class="pln">longitude</span><span class="pun">;</span><span class="pln">
        alert</span><span class="pun">(</span><span class="str">"Latitude : "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> latitude </span><span class="pun">+</span><span class="pln"> </span><span class="str">" Longitude: "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> longitude</span><span class="pun">);</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
     
     </span><span class="kwd">function</span><span class="pln"> errorHandler</span><span class="pun">(</span><span class="pln">err</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">err</span><span class="pun">.</span><span class="pln">code </span><span class="pun">==</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
           alert</span><span class="pun">(</span><span class="str">"Error: Access is denied!"</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> err</span><span class="pun">.</span><span class="pln">code </span><span class="pun">==</span><span class="pln"> </span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
           alert</span><span class="pun">(</span><span class="str">"Error: Position is unavailable!"</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
     
     </span><span class="kwd">function</span><span class="pln"> getLocationUpdate</span><span class="pun">(){</span><span class="pln">
        
        </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">navigator</span><span class="pun">.</span><span class="pln">geolocation</span><span class="pun">){</span><span class="pln">
           
           </span><span class="com">//timeout at 60000 milliseconds (60 seconds)</span><span class="pln">
           </span><span class="kwd">var</span><span class="pln"> options</span><span class="pun">={</span><span class="pln">timeout</span><span class="pun">:</span><span class="lit">60000</span><span class="pun">};</span><span class="pln">
           geoLoc</span><span class="pun">=</span><span class="pln">navigator</span><span class="pun">.</span><span class="pln">geolocation</span><span class="pun">;</span><span class="pln">
           watchID</span><span class="pun">=</span><span class="pln">geoLoc</span><span class="pun">.</span><span class="pln">watchPosition</span><span class="pun">(</span><span class="pln">showLocation</span><span class="pun">,</span><span class="pln"> errorHandler</span><span class="pun">,</span><span class="pln"> options</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
           alert</span><span class="pun">(</span><span class="str">"Sorry, browser does not support geolocation!"</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">

</head> <body>

  </span><span class="tag">&lt;form&gt;</span><span class="pln">
     </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">getLocationUpdate</span><span class="pun">();</span><span class="atv">"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Watch Update"</span><span class="tag">/&gt;</span><span class="pln">
  </span><span class="tag">&lt;/form&gt;</span><span class="pln">
  

</body> </html>

这将产生以下输出-

参考链接

www.learnfk.com/html5/geolo…