Google Map API v3 从我的位置开始搜索地点？

Question

我需要从我的位置开始搜索所有已关闭的药房，我编写的代码有时有效，有时无效，搜索始终有效，但始终有效的是固定我的位置并将其设置为起点搜索。

有时当我进入第一个页面时一切正常，然后在刷新页面后，lat 和 long 采用我设置的默认值而不是我的位置，当这种情况发生时，我打开 chrome 上的调试并跟踪一些行，突然一切正常，我不确定这里到底发生了什么，但希望有人能帮助我，因为我被卡住了。

这是我的代码：

<script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<script>
    var map;
    var infowindow;
    var lat = 26.304295; //29.331647;
    var lng = 50.155233; //48.074473;

    function success(position) {

    };

    function error(msg) {
        alert(msg);
    }

    var request = $.ajax({
        async: false,
        success: function (data) {
            navigator.geolocation.getCurrentPosition(function (pos) {
                lat = pos.coords.latitude;
                lng = pos.coords.longitude;

                $("#Lat").val(lat);
                $("#Lng").val(lng);
            }, function (error) {
                // ...
            }, { timeout: 10000 });
        }
    });

    $.when(request).done(function () {

        function initialize() {

            if ($("#Lat").val() != "")
                lat = $("#Lat").val();

            if ($("#Lng").val() != "")
                lng = $("#Lng").val();

            var pyrmont = new google.maps.LatLng(lat, lng);

            map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: pyrmont,
                zoom: 14
            });

            var request = {
                location: pyrmont,
                radius: 3000,
                types: ['pharmacy']
            };
            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);

            var myloc = new google.maps.Marker({
                clickable: false,
                icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
                                                        new google.maps.Size(22, 22),
                                                        new google.maps.Point(0, 18),
                                                        new google.maps.Point(11, 11)),
                shadow: null,
                zIndex: 999,
                map: map
            });

            var me = new google.maps.LatLng(lat, lng);
            myloc.setPosition(me);
        }

        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            }
        }

        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(place.name);
                infowindow.open(map, this);
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    });

</script>

这是我的html代码：

 <div id="map-canvas">
</div>
<asp:HiddenField runat="server" ClientIDMode="Static" ID="Lat" Value="" />
<asp:HiddenField runat="server" ClientIDMode="Static" ID="Lng" Value="" />

Answer 1

我想出了这里的问题。为了能够获得您的位置，您必须首先拥有一个完全初始化的地图，这就是为什么每当我试图获得我的位置时，无论我做什么，它总是第二次执行。为了解决这个问题调用获取我的位置函数然后初始化地图，地图将首先被初始化然后我的位置函数将被调用，之后只需将新的经纬度指向地图并搜索地点，那就是.

代码结果如下：

   <script>
    var map;
    var infowindow;
    var pyrmont;
    var lat = 29.331647;
    var lng = 48.074473;

    function initialize() {

        var pyrmont = new google.maps.LatLng(lat, lng);

        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: pyrmont,
            zoom: 14
        });
    }

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(place.name);
            infowindow.open(map, this);
        });
    }

    //Get current location and re-initialize the map to it
    //Search starting from your location
    //-----------------------------------------------------------------------------------


    var options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    };

    function success(pos) {
        var crd = pos.coords;

        var pyrmont = new google.maps.LatLng(crd.latitude, crd.longitude);

        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: pyrmont,
            zoom: 14
        });

        var request = {
            location: pyrmont,
            radius: 3000,
            types: ['pharmacy']
        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);

        var myloc = new google.maps.Marker({
            clickable: false,
            icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
                                                        new google.maps.Size(22, 22),
                                                        new google.maps.Point(0, 18),
                                                        new google.maps.Point(11, 11)),
            shadow: null,
            zIndex: 999,
            map: map
        });

        var me = new google.maps.LatLng(crd.latitude, crd.longitude);
        myloc.setPosition(me);
    };

    function error(err) {
        console.warn('ERROR(' + err.code + '): ' + err.message);
    };
    //----------------------------------------------------------------------------------------------

    //Call get my location
    navigator.geolocation.getCurrentPosition(success, error, options);

    //Initialize the map
    google.maps.event.addDomListener(window, 'load', initialize);

</script>