Tashiyar Geo wa HTML5

HTML5 Geolocation (geoshayi) yana amfani da shi don nuna hanyar mutum.

Sai sai sai: ci gaba da nuna hanyar mutum a Google Maps.

Samun hanyar mutum.

HTML5 Geolocation API yana amfani da shi don samun hanyar mutum.

Duba da da ake amfani da shi a cikin saukiyar hanyar mutum wanda za a iya cikin tsawon aikin tsawon aikin, a cikin haɗa da da ake amfani da shi a cikin hukuncin kiyayewar ƙwarin mutum.

Amfani da browser.

Internet Explorer 9, Firefox, Chrome, Safari da Opera suka amfani da geoshayi.

Gudanarwa:Don haɗa da alamar GPS, misali iPhone, geoshayi yana da dacewa.

HTML5 - Amfani da geoshayi.

Amfani da fagen da ake amfani da shi a cikin getCurrentPosition() dona samun hanyar mutum.

Mananin da ake amfani da su: wannan shi ne mafi yawa na shirin geoshayi na farko, wanda zai koma darajar da kwarin saukiyar hanyar mutum.

Example

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

Try It Yourself

Mananin da ake amfani da su:

  • Duba da da ake amfani da shi a cikin geoshayi.
  • Idan ake amfani da, ya aiki getCurrentPosition() fagen. Idan ba ake amfani da, ya nuna fagen ga mutum.
  • Idan getCurrentPosition() ya aiki, wakilin coordinates ya koma fagen da ake amfani da shi a cikin fagen da ake amfani da shi a cikin showPosition().
  • Fagen da ake amfani da shi a cikin showPosition() dona samun da nuna darajar da kwarin saukiyar hanyar.

Mananin da ake amfani da su a cikin shirin geoshayi na farko na yau yana da fagen da ake amfani da su.

Fagen da ake amfani da su da kwarin da kwarin.

Matashin da ake amfani da shi a cikin sabon sabon geoshayi na getCurrentPosition() dona amfani da fagen zai aiki a lokacin da a baiwa hanyar a samun hanyar saukiyar geoshayi.

Example

function showError(error)
  {
  kwarin(error.code)
    {
    kwarin error.PERMISSION_DENIED:
      x.innerHTML="Wannan ya yi nuna cewa an yi iyana a kwarin Geolocation."
      break;
    kwarin error.POSITION_UNAVAILABLE:
      x.innerHTML="Iya na gari a cikin saukiyar hanyar baiwa."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

Try It Yourself

错误代码：

  • Permission denied - 用户不允许地理定位
  • Position unavailable - 无法获取当前位置
  • Timeout - 操作超时

在地图中显示结果

如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：

Example

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

Try It Yourself

在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。

谷歌地图脚本

上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

给定位置的信息

本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。

案例：

  • 更新本地信息
  • 显示用户周围的兴趣点
  • 交互式车载导航系统 (GPS)

getCurrentPosition() 方法 - 返回数据

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy Altitude accuracy of the location
coords.heading Direction, measured in degrees from true north
coords.speed Speed, measured in meters per second
timestamp Response Date/Time

Geolocation Object - Other Interesting Methods

watchPosition() - Returns the user's current location and continues to return the user's updated location when moving (like GPS on a car).

clearWatch() - Stop watchPosition() method

The following example shows the watchPosition() method. You need a precise GPS device to test this example (such as iPhone):

Example

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

Try It Yourself