Question

这里有长时间的读者/第一次海报，我怀疑这个问题很容易回答，但帮助我永无止境。

我只是想i）检索用户的位置，ii）在这个位置显示一个图标，以及iii）有一个标有＆＃39;找我的按钮＆＃39;将地图平移到此位置。

我有i）和ii）工作，但是虽然我有其他按钮可以平移到特定位置，但这个按钮似乎不起作用：

        var viewportHeight = $(window).height();
        var mapHeight = viewportHeight - 93;
        var map;
        var union = new google.maps.LatLng(53.806828, -1.555999);
        var userLocation;
        var userIcon = 'userIcon.png';
        var parkinson = new google.maps.LatLng(53.808, -1.553);
        var unionDescription = '<div id="content">' + '<div id="siteNotice">' + '</div>' + '<h2 id="firstHeading" class="firstHeading">Your Union</h2>' + '<div id="bodyContent">' + '<p>Heres a bit about us</p>' + '</div>' + '</div>';


        //Try and get the user's location

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                $('#map_canvas').gmap('addMarker', {
                    'position': userLocation,
                    'bounds': false,
                    'icon': userIcon
                });
            });
        };



        //initialise the map
        $(function () {


            $('#map_canvas').gmap({
                'center': union,
                'zoom': 16,
                'mapTypeId': google.maps.MapTypeId.ROADMAP,
                'styles': campusStyles,
                'minZoom': 15,
                'maxZoom': 17
            }).bind('init', function (ev, map) {

                $('#map_canvas').gmap('addMarker', {
                    'position': parkinson,
                    'bounds': false
                }).click(function () {
                    $('#map_canvas').gmap('openInfoWindow', {
                        'content': 'Hello World!'
                    }, this);
                });

                $('#map_canvas').gmap('addMarker', {
                    'position': union,
                    'bounds': true
                }).click(function () {
                    $('#map_canvas').gmap('openInfoWindow', {
                        'content': unionDescription
                    }, this);
                });

                $('#map_canvas').height(mapHeight);
                google.maps.event.trigger(map, 'resize');
                $('#unionButton').click(function () {
                    map.panTo(union);
                });
                $('#findMe').click(function () {
                    map.panTo(userLocation);
                });

                $('#map_canvas').height(mapHeight);
            });

        });

我实际上在这里工作：http://jdp.org.uk/tests/mapstest4.html

Answer 1

我不知道为什么但我的导航地理定位不起作用，所以我只是绕过了这个要求并对用户LatLng进行了硬编码。对我来说有用的是使用行if(navigator.geolocaton)将整个块$('#unionButton').click(function(){map.panTo(union);});剪切并粘贴到块的正下方。看来map尚未定义地理位置代码。

从我的测试中，只有当前位置接近目标时才会进行平滑平移。 http://jsfiddle.net/EejRt/

我有：

    $('#map_canvas').height(mapHeight);
    google.maps.event.trigger(map, 'resize');
    $('#unionButton').click(function(){map.panTo(union);}); 
    $('#map_canvas').height(mapHeight);

//if (navigator.geolocation) { 
//  navigator.geolocation.getCurrentPosition(function(position) {  
//    var userLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    var userLocation = new google.maps.LatLng(53.8018,-1.553);
    $('#map_canvas').gmap('addMarker', {'position': userLocation, 'bounds': false,  'icon' : userIcon });
    $('#findMe').click(function(){map.panTo(userLocation)});
//  });
//  };

jQuery UI map - panTo用户位置

1 个答案: