基于JavaScript定位当前的地理位置-前端开发

下面是“基于JavaScript定位当前的地理位置”的完整攻略。

下面是“基于JavaScript定位当前的地理位置”的完整攻略。

一、前提准备

在开始定位当前的地理位置之前，需要完成以下几个前提准备：

获取用户的位置需要用户授权，所以需要在web应用程序中使用HTML5的Geolocation API，而Geolocation只支持在HTTPS或者本地host环境下使用，所以需要对应用进行HTTPS协议的开发或者本地开发。同时需要使用支持Geolocation API的浏览器。
需要使用JavaScript语言来实现获取用户位置的功能。
要想获取到用户的当前位置，需要在用户的设备中开启位置定位功能。

二、获取用户位置的步骤

获取用户的位置可以分为以下三个步骤：

1. 创建Geolocation对象

创建Geolocation对象，该对象可以通过调用navigator.geolocation来进行创建。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else { 
  console.log("Geolocation is not supported by this browser.");
}

2. 监听位置变化

监听位置变化，通过设置watchPosition函数，可以实现获取位置变化的实时更新。

if (navigator.geolocation) {
      navigator.geolocation.watchPosition(showPosition);
} else { 
      console.log("Geolocation is not supported by this browser.");
}

function showPosition(position) {
  console.log("Latitude: " + position.coords.latitude +
  "Longitude: " + position.coords.longitude);
}

3. 显示用户位置

最后一步就是将获取到的位置经纬度显示在HTML页面上。可以通过使用HTML DOM来实现。

<!DOCTYPE html>
<html>
<head>
    <title>Show Location</title>
    <meta charset="utf-8">
    <script>
        // HTML5的地理位置获取
        if (navigator.geolocation) {
            // 获取当前位置
            navigator.geolocation.getCurrentPosition(showmap,errorHandler);
        }
        else {
            alert("This browser does not support HTML5 geolocation");
        }
        function showmap(position){
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            console.log(lat,lng)

            // 将地图放在指定元素的中间
            var map = new BMap.Map("map");
            var point = new BMap.Point(lng, lat);
            map.centerAndZoom(point, 15);

            // 添加标注
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            var label = new BMap.Label("你的所在位置",{offset:new BMap.Size(20,-10)});
            marker.setLabel(label);
        }
        function errorHandler(error){
            console.log(error.message);
        }
    </script>
</head>
<body>
    <div id="map" style="width:100%;height:100%"></div>
</body>
</html>

三、示例说明

下面列举两个实际的案例，分别介绍如何使用 JavaScript 定位当前的地理位置。

示例一：使用百度地图API获取当前位置（适用于中国大陆）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Show Location</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=您的AK"></script>
    <script>
      // HTML5的地理位置获取
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition,errorHandler);
      } 
      else {
        alert("Geolocation is not supported by this browser.");
      }

      function showPosition(position) {
        var x = position.coords.latitude;
        var y = position.coords.longitude;
        console.log(x,y)

        // 创建百度地图实例，并设置中心点坐标和地图级别
        var map = new BMap.Map("container");
        var point = new BMap.Point(y, x);
        map.centerAndZoom(point, 17);

        // 添加标注以及标注内容
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        var label = new BMap.Label("您的位置",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label);
      }

      function errorHandler(error) {
        switch(error.code){
          case error.PERMISSION_DENIED:
            console.log("您拒绝了位置服务请求。");
            break;
          case error.POSITION_UNAVAILABLE:
            console.log("位置获取失败。");
            break;
          case error.TIMEOUT:
            console.log("位置请求超时。");
            break;
          case error.UNKNOWN_ERROR:
            console.log("位置服务不可用。");
            break;
        }
      }
    </script>
</head>
<body>
    <div id="container" style="width:100%;height:100%"></div>
</body>
</html>

示例二：使用Google Map API获取当前位置（全球通用）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Show Location</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=您的APIKey"></script>
    <script>
      // HTML5的地理位置获取
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, errorHandler);
      } 
      else {
        alert("Geolocation is not supported by this browser.");
      }

      function showPosition(position) {
        var x = position.coords.latitude;
        var y = position.coords.longitude;
        console.log(x,y)

        // 创建谷歌地图实例，并设置中心点坐标和地图级别
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: x, lng: y},
          zoom: 15
        });

        // 添加标注以及标注内容
        var marker = new google.maps.Marker({
          position: {lat: x, lng: y},
          map: map,
          title: '您的位置'
        });
      }

      function errorHandler(error) {
        switch(error.code){
          case error.PERMISSION_DENIED:
            console.log("您拒绝了位置服务请求。");
            break;
          case error.POSITION_UNAVAILABLE:
            console.log("位置获取失败。");
            break;
          case error.TIMEOUT:
            console.log("位置请求超时。");
            break;
          case error.UNKNOWN_ERROR:
            console.log("位置服务不可用。");
            break;
        }
      }
    </script>
</head>
<body>
    <div id="map" style="width:100%;height:100%"></div>
</body>
</html>

以上就是“基于JavaScript定位当前的地理位置”的完整攻略，希望能对你有所帮助。