1

ここでの長年の読者/初めての投稿者。簡単に答えられると思われる質問がありますが、私を際限なく助けてくれます。

i) ユーザーの位置を取得し、ii) この位置にアイコンを表示し、iii) マップをこの位置にパンする「Find Me」というラベルの付いたボタンを配置します。

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 に答える