使用JS获取当前地理位置方法汇总（如用谷歌接口，会出再以上报错，必须申请密钥并设置接受服务器IP！！！）

RefererNotAllowedMapError

错误

加载 Google Maps JavaScript API 的当前 URL 尚未添加到允许的引用站点列表中。请在 Google API Console 上检查您的 API 密钥的引用站点设置。

请参阅 Google API Console 中的 API 密钥。如需了解详细信息，请参阅 API 密钥安全使用最佳实践。

如用谷歌接口，会出再以上报错，必须申请密钥并设置接受服务器IP！！！

点击事件必须在initMap()中

function initMap() {
             geocoder = new google.maps.Geocoder();
             document.getElementById('submit').addEventListener('click', function() {
                 getCity();
             });
         }

1.获取当前地理位置

　　调用方法 void getCurrentPosition(onSuccess, onError, options);即可。

　　其中onSuccess是获取当前位置信息成功时执行的回调函数，onError是获取当前位置信息失败时所执行的回调函数，options是一些可选熟悉列表。其中第二和第三个参数为可选属性。

　　在onSuccess回调函数中，用到了参数position，代表一个具体的position对象，表示当前位置。其具有如下属性：

latitude：当前地理位置的纬度。
longitude：当前地理位置的经度。
altitude：当前位置的海拔高度（不能获取时为null）。
accuracy：获取到的纬度和经度的精度（以米为单位）。
altitudeAccurancy：获取到的海拔高度的经度（以米为单位）。
heading：设备的前进方向。用面朝正被方向的顺时针旋转角度来表示（不能获取时为null）。
speed：设备的前进速度（以米/秒为单位，不能获取时为null）。
timestamp：获取地理位置信息时的时间。

　　在onError回调函数中，用到了error参数。其具有如下属性：

code：错误代码，有如下值。

用户拒绝了位置服务（属性值为1）；
获取不到位置信息（属性值为2）；
获取信息超时错误（属性值为3）。

message：字符串，包含了具体的错误信息。

　　在options参数中，可选属性如下：

enableHighAccuracy：是否要求高精度的地理位置信息。
timeout：设置超时时间（单位为毫秒）。
maximumAge：对地理位置信息进行缓存的有效时间（单位为毫秒）。

　　其中注意要写上如下代码，判断浏览器是否支持HTML5获取地理位置信息，以兼容较早不支持的浏览器。

if (navigator.geolocation) {

    //获取当前地理位置信息

    navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

 } else {

      alert("你的浏览器不支持HTML5来获取地理位置信息。");

}

2.调用Google Map API获取当前位置信息

　　首先，需要在页面中引用Google Map API的脚本文件，导入方法如下所示。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

　　其次，设定地图参数，设定方法如下所示。

//指定一个google地图上的坐标点，同时指定该坐标点的横坐标和纵坐标

var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);

var myOptions = {

   zoom: 14,    //设定放大倍数

   center: latlng,  //将地图中心点设定为指定的坐标点

   mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型

};

　　最后，创建地图，并在页面中显示，创建方法如下所示。

//创建地图，并在页面map中显示

var map = new google.maps.Map(document.getElementById("map"), myOptions);

　　最后的最后，献上本次示例所有代码。代码如下所示。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>获取当前位置并显示在google地图上</title>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

        function init() {

            if (navigator.geolocation) {

                //获取当前地理位置

                navigator.geolocation.getCurrentPosition(function (position) {

                    var coords = position.coords;

                    //console.log(position);

                    //指定一个google地图上的坐标点，同时指定该坐标点的横坐标和纵坐标

                    var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);

                    var myOptions = {

                        zoom: 14,    //设定放大倍数

                        center: latlng,  //将地图中心点设定为指定的坐标点

                        mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型

                    };

                    //创建地图，并在页面map中显示

                    var map = new google.maps.Map(document.getElementById("map"), myOptions);

                    //在地图上创建标记

                    var marker = new google.maps.Marker({

                        position: latlng,    //将前面设定的坐标标注出来

                        map: map //将该标注设置在刚才创建的map中

                    });

                    //标注提示窗口

                    var infoWindow = new google.maps.InfoWindow({

                        content: "当前位置：<br/>经度：" + latlng.lat() + "<br/>维度：" + latlng.lng()   //提示窗体内的提示信息

                    });

                    //打开提示窗口

                    infoWindow.open(map, marker);

                },

                function (error) {

                    //处理错误

                    switch (error.code) {

                        case 1:

                            alert("位置服务被拒绝。");

                            break;

                        case 2:

                            alert("暂时获取不到位置信息。");

                            break;

                        case 3:

                            alert("获取信息超时。");

                            break;

                        default:

                            alert("未知错误。");

                            break;

                    }

                });

            } else {

                alert("你的浏览器不支持HTML5来获取地理位置信息。");

            }

        }

    </script>

</head>

<body onload="init()">

    <div id="map" style="width: 800px; height: 600px"></div>

</body>

</html>