javascript - 如何使用 html 地理位置和 google map api 获取当前位置

标签 javascript php google-maps

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

<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 //

如何将纬度和经度传递到 map 中?

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

</body>

它抛出纬度和经度未定义。

最佳答案

在回调showPosition中调用 map 的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*/

或者,声明使用回调函数来初始化 map

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*/

关于javascript - 如何使用 html 地理位置和 google map api 获取当前位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48872636/

相关文章:

javascript - 在 AngularJS 中创建静态/全局集合

javascript - 使用 Google Enhanced 电子商务时,从购物车中添加/删除时,数量值应该代表什么?

javascript - 运行 React js 示例 Web 应用程序时出现控制台错误

php - 尝试按 ID 选择 "product listings"时 Codeigniter 出现奇怪问题

php - 使用 Doctrine 和 Symfony 导出到 csv 文件

google-maps - 如何从 Google map Javascript V3 中的 Google map 气泡中删除滚动条

javascript - 某些 LatLng 如何用于在 Google map 上放置标记,而不是绘制多边形?

javascript - knockout ,当我尝试从其中删除一项(如果其中包含多个项目)时,集合属性变为空?

php - Zend-1048 列 'member_login' 不能为空

c# - 从 CSV 文件中提取数据(融合表和 kml 解决方法)