如何使用带有 google maps api 的 html 地理位置获取当前位置答案

【问题标题】：How to get current position using html geo location with google maps api如何使用带有 google maps api 的 html 地理位置获取当前位置
【发布时间】：2018-07-30 01:40:51
【问题描述】：

我有这个脚本可以在谷歌地图上显示标记，效果很好，但现在我想获取当前位置以最初放大地图..

<body onload="initCoords()">

function initCoords() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    }
}

function showPosition(position) {
    var lat = position.coords.latitude;
    var long =  position.coords.longitude;
} // this gets the current location loaded when body loads //

如何将经纬度传递到地图中？

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(lat, long),
      zoom: 12
    });

</body>

它抛出的 lat 和 long 没有定义。

【问题讨论】：

标签： javascript php google-maps

【解决方案1】：

在回调showPosition 中调用地图的setPosition 方法。正如您在 initMap 函数中声明的 map 一样，可能还在 initMap 的主体中声明其他函数

function initMap() {
    lat=56;
    long=-2;
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(lat, long),
      zoom: 12
    });

    var initCoords=function() {
        if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        }
    }
    var showError=function(e){
        alert(e)
    };

    var showPosition=function( position ) {
        var lat = position.coords.latitude;
        var long =  position.coords.longitude;
        var latlng=new google.maps.LatLng(lat,long);
        map.setPosition( latlng );

        /* add marker?? */
    }


    /* other code ?.... */

}/* close function*/

或者，声明使用回调函数初始化地图

var map,lat,long;

function initMap() {
    var initCoords=function() {
        if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        }
    }
    var showError=function(e){
        alert(e)
    };

    var showPosition=function( position ) {
        var lat = position.coords.latitude;
        var long =  position.coords.longitude;
        var latlng=new google.maps.LatLng(lat,long);

        var map = new google.maps.Map( document.getElementById('map'), {
            center: latlng,
            zoom: 12
        });
    }


    /* other code ?.... */

}/* close function*/

【讨论】：

谢谢！它显示未定义 showPosition。如果我将原始 initMap 函数留在 showPosition 下方，它会缩放到正确的位置但我丢失了我的标记，它会加载标记而不是它们消失并正确缩放

【解决方案2】：

如果您像这样异步加载 Google Maps JS API 脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

然后bodyonload 事件将发生并在地图 API 完全加载之前调用initCoords()。这意味着该函数中尝试访问地图 API 的任何代码都将不起作用。

一种选择是监听地图对象的tilesloaded 事件，并在第一次触发该事件时运行放大功能（这在可见图块完成加载时发生）。

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 40, lng: 20},
      zoom: 3
  });
  google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    map.setZoom(8); // call initCoords()
  });
}

我使用addListenerOnce，以便地图仅在地图图块第一次加载完成后才会放大。

Here is a JSBin 具有此功能。

【讨论】：