如何使用 GoogleMapAPI 获取用户位置？

Google Maps JavaScript API 有助于在您自己的网页内容中创建和自定义地图。 API 提供各种类型的地图，如卫星地图、道路地图等，可以根据程序员的应用程序需求，通过更改样式、地图图层、
事件和使用其服务和库的控件。为了在您的项目中显示地图，使用了Google Map API 。

注意：要修改或使用上述功能，用户必须获得自己的API KEY。

脚步：

1. 按照开发者控制台中的步骤创建您自己的 API 密钥以访问所有 Google Maps API。将其保存在一些记事本中以备将来编码之用。
2. 参考图片：为此创建新项目。

   

3. 设置 OAuth 客户端 ID..

   
   

地图加载：

它应该包含在代码的头部部分，利用上面创建的 API_KEY。

示例：在下面的示例中，Javascript 用于实现 Google 地图 API，HTML 用于网页设计， PHP用于所有错误报告和 API KEYS 的访问。因此，当前位置/地点的纬度和经度显示在地图对象上，带有箭头标记。

  


  


    html,
    body {
        margin: 0;
        padding: 0;
    }
  
    body {
        background-color: #FFF;
        font-family: Helvetica, Arial,
            "Lucida Grande", sans-serif;
    }
  
    #mapDivId {
        margin: 25px 10px;
        max-width: 640px;
        min-height: 380;
    }
  
    #buttonID:disabled {
        background: #6c88d2;
    }
  
    #buttonID {
        background: #33E6FF;
        border: #4633FF 2px solid;
        border-radius: 2px;
        color: #FFF;
        cursor: pointer;
        display: block;
        font-size: 0.8em;
        padding: 15px 35px;
    }

  

    
        How to Get User Location 
        using Google Map API
    
      
    
        
            Click for Location
        
    
  
    
  
    
    
  

  
        var map;
        function initMap() {
  
            /* Access of single map object instance*/
            var mapContainer = document
                .getElementById("mapDivId");
  
            var coordinates = new 
                google.maps.LatLng(17.457427, 78.284296);
                  
            var defaultOptions = {
                center: coordinates,
  
                /* Setting the initial resolution */
                zoom: 4
            }
  
            map = new google.maps.Map(
                    mapContainer, defaultOptions);
        }// end initMap() function
  
        function getLocation() {
            document.getElementById(
                "buttonID").disabled = true;
  
            document.getElementById(
                "buttonID").innerHTML = "Executing..";
  
            if ("geolocation" in navigator) {
                navigator.geolocation
                .getCurrentPosition(function (position) {
                    var currentLatitude 
                        = position.coords.latitude;
  
                    var currentLongitude 
                        = position.coords.longitude;
  
                    var infoLatLang = "Latitude: " 
                        + currentLatitude +
                        "<br>Longitude: " + 
                        currentLongitude;
  
                    var infoContent = 
                        new google.maps.InfoWindow
                        ({ map: map, content: infoLatLang });
  
                    var currentLocation = {
                        lat: currentLatitude,
                        lng: currentLongitude
                    };
  
                    infoContent.setPosition(
                            currentLocation);
                              
                    document.getElementById("buttonID")
                        .style.display = 'none';
                });
            }
        }// end function getLocation()
    

  

输出：