1

长期读者/第一次在这里发帖，我怀疑这个问题很容易回答，但无休止地帮助我。

我只是想 i) 检索用户的位置，ii) 在此位置显示一个图标，以及 iii) 有一个标有“查找我”的按钮，将地图平移到该位置。

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

4

1 回答 1

0

我不知道为什么，但我的导航器地理位置不起作用，所以我只是绕过了这个要求并硬编码了一个用户 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)});
//  });
//  };
于 2012-04-29T16:36:04.367 回答