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

时间:2014-04-05 12:31:17

标签: c# asp.net google-maps-api-3

我需要从我的位置开始搜索所有关闭的药房,我写的代码有时会起作用,有时候不会,搜索总是有效,但总是有用的是固定我的位置并将其设置为起点指向搜索。

有时当我进入页面时,一切正常,那么在刷新页面后,lat和long将采用我设置的默认值而不是My Location,当发生这种情况时,我打开chrome和trace上的调试一些线条突然一切正常,我不确定这里到底发生了什么,但希望有人可以帮助我,因为我被卡住了。

这是我的代码:

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

1 个答案:

答案 0 :(得分:0)

我想到这里的问题是什么。为了能够获得您的位置,您必须首先获得完全初始化的地图,这就是为什么每当我试图获取我的位置时,无论我做什么,它总是执行第二次。要解决这个问题,请调用我的位置函数然后初始化地图,首先初始化地图然后调用我的定位函数,之后只需将新的long和lat指向地图并搜索地点,那就是那个

以下是代码的结果:

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