Question

我正在编写一个程序，用于在单击按钮后确定用户的位置。我打算如何操作是在加载窗口时，地图以美国为中心，但是当点击“查找当前位置”按钮时，它会缩放它并以用户的当前位置为中心。为此，我使用了HTML5 Geolocation。该程序初始化很好，并以美国为中心，但是当我点击按钮时它不会在我的位置中心。 getLocation（）函数确定我当前的位置坐标但由于某种原因不使用这些坐标来重置我的mapDiv。结果是再次调用initialize（）函数，并且页面基本上重新加载，映射以美国为中心而不是我当前的位置。我是JavaScript和JQuery的新手，所以不确定我缺少什么。我在下面提供了JavaScript代码。 HTML代码只包含一堆div，其中一个是map div，另一个是点击时触发getLocation函数的按钮。任何帮助将受到高度赞赏。

    var mapOptions;
    var map;
    var mapDiv = document.getElementById("map");
    var latitude;
    var longitude;

    function initialize() {

        mapOptions = {

            center: new google.maps.LatLng(37.09024, -95.712891),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 5,

            panControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                Position: google.maps.ControlPosition.TOP_RIGHT
            },
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER
            },
            streetViewControl: false,
            overviewMapControl: false
    };


        map = new google.maps.Map(mapDiv, mapOptions);
    }

    function getLocation() {

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(success, fail);

        }

        else {

            Error("Geolocation is not supported by this browser");

        }



        function success(position) {


                latitude = position.coords.latitude;
                longitude = position.coords.longitude;
                var pos = new google.maps.LatLng(latitude, longitude);
                mapOptions.center = pos;
                mapOptions.zoom = 10;

                map = new google.maps.Map(mapDiv, mapOptions);

        }

        function fail(error) {
            var errors = { 
                    1: 'Permission denied',
                    2: 'Position unavailable',
                    3: 'Request timeout'
            };

            alert("Error: " + errors[error.code]);

        }


    }

    $("#location").click(getLocation);

    $(window).load(initialize);

HTML5地理位置问题

0 个答案: