从navigator.geolocation.getCurrentPosition中调用它

时间:2011-08-30 15:46:41

标签: javascript jquery google-maps google-maps-api-3

最简单的方式向您展示我正在尝试使用的工作版本:http://jsfiddle.net/t8Brm/11/所需的现代浏览器具有GEO位置支持。

在JS代码中,我已经注释掉导致问题的代码,以便您可以看到它首先运行。

问题是: 如何取消注释以下代码,使用地理位置添加标记并将地图居中,而不会获取Error: position.coords is undefined

$(this).trigger("gMap.addMarker", {
     latitude: latitude,
     longitude: longitude,
     content: "You Are Here"
});
$(this).trigger("gMap.centerAt", {
     latitude: latitude,
     longitude: longitude
});

这是原始插件:http://github.com/marioestrada/jQuery-gMap我添加了GEO位置的额外功能。如下所示:

function generateDirections(from, to, directionHtml){
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();

            $('#'+directionHtml).html('');

            var request = {
                origin: from,
                destination: to,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setMap($gmap);
            directionsDisplay.setPanel(document.getElementById(directionHtml));
            directionsService.route(request, function(response, status){
                if(status == google.maps.DirectionsStatus.OK){
                    directionsDisplay.setDirections(response);
                    if($("#gmaps_from").val().length === 0)
                        $("#gmaps_from").val(response.routes[0].legs[0].start_address);
                }
            });

            setTimeout(function(){
                $("#"+directionHtml).slideDown("slow");
            },1000);
        }

        //make this available to the click element
        $.data($('#gmaps_getdirections')[0], 'inst', this);

        $('#gmaps_getdirections').click(function(e) {
            e.preventDefault();

            var from = $('#gmaps_from').val();
            if(opts.address){
                var to = opts.address;
            } else {
                var to = parseFloat(opts.latitude) + ", " + parseFloat(opts.longitude);
            }

            generateDirections(from, to, "gmaps_directions");

            //open the google window
            //window.open("http://maps.google.com/maps?saddr=" + from + "&daddr=" + to, "GoogleWin", "menubar=1,resizable=1,scrollbars=1,width=750,height=500,left=10,top=10");
        });

        if(opts.geolocation && navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){
                var latitude = position.coords.latitude;
                var longitude = position.coords.longitude;

                var from = parseFloat(latitude) + ", " + parseFloat(longitude);

                if(opts.address){
                    var to = opts.address;
                } else {
                    var to = parseFloat(opts.latitude) + ", " + parseFloat(opts.longitude);
                }

                /*$(this).trigger("gMap.addMarker", {
                    latitude: latitude,
                    longitude: longitude,
                    content: "You Are Here"
                });
                $(this).trigger("gMap.centerAt", {
                    latitude: latitude,
                    longitude: longitude
                });*/

                generateDirections(from, to, "gmaps_directions");                    
            });
        }

2 个答案:

答案 0 :(得分:0)

好的 - 在FF中进行测试 - 这是我发现的内容 - $(this).trigger("gMap.addMarker", {...会导致您的功能再次被评估。它第一次找到lat / long,但在触发调用之后,再次调用相同的函数,并再次指向该函数。

我不熟悉插件,但我尝试在元素(#google_maps)上触发它:http://jsfiddle.net/t8Brm/18

这解决了递归调用问题但引发了另一个异常指定了无效或非法字符串。

希望这能指出你正确的方向。

答案 1 :(得分:0)

您可以像这样执行等效的JavaScript API v3代码:

new google.maps.Marker({position:new google.maps.LatLng(latitude,longitude),
    map:$gmap,
    title:"You Are Here"});
$gmap.setCenter(new google.maps.LatLng(latitude,longitude));

在jsFiddle中用此替换已注释掉的代码会将标记放在地图上,并暂时将地图置于您所在位置的中心位置。

似乎在某个时刻之后会触发另一个位置的居中。 (我假设你可以把它关掉,但如果没有,请在评论中说出来,我或其他人无疑会看到更多。)