创建Javascript / JQuery后检索Google Map对象

时间:2014-11-24 19:07:48

标签: javascript jquery html google-maps

我想知道创建后是否有办法检索google.maps.Map对象?我需要在我的页面中创建几个地图,并且我使用函数循环JSON来创建地图。因此,我没有留下一张全球地图'对象,我需要能够不时地重新定位地图。问题是,我无法弄清楚如何获得地图'对象重置地图的中心。我可以通过JQuery选择器获取div,在那里我使用Gmaps.js创建地图,我甚至可以触发' resize'事件作为隐藏div的修复。但是,我没有运气检索地图对象。

------------------地图创建功能-------------------------- ------------

  function doMaps(){$.getJSON("map-locations.json", function(results) {
    //var JSONdata = JSON.parse(results);
    //alert(results);

    $.each(results, function(index, val) {
        var mapdiv = results[index].mapdiv;
        var destlat = results[index].destination.lat;
        var destlon = results[index].destination.lon;
        var desttitle = results[index].destination.title;
        var orglat = results[index].origin.lat;
        var orglon = results[index].origin.lon;


         var map;
           map = new GMaps({
            el: '#'+mapdiv,
            lat: destlat,
            lng: destlon,
            width: '750px',
            height: '580px'
           });
           map.travelRoute({
             origin: [orglat, orglon],
             destination: [destlat, destlon],
             travelMode: 'driving',
             step: function(e){
               $('#instructions').append('<li>'+e.instructions+'</li>');
               $('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
                 map.drawPolyline({
                   path: e.path,
                   strokeColor: '#131540',
                   strokeOpacity: 0.6,
                   strokeWeight: 6
                 });  
               });
             }
           });
           map.addMarker({
             lat: destlat,
             lng: destlon,
             title: desttitle,
             infoWindow: {
                 content: '<p>'+desttitle+'</p>'
                 }
           });

           }); 
           });   
        };

-------------调整大小功能 - 从ZoZo标签触发标签更改事件---------------------

          function resizeMaps(){

            $('.map').each(function() {
            var map = $(this).get(0);
            google.maps.event.trigger(map, 'resize');
           // WHERE I WOULD LIKE TO RECENTER AFTER RESIZE
           //$(this).get(0).setCenter(currCenter);
         })

         }

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

创建一个对象数组是最好的选择。我实际上最终得到了一个多维数组。

     var maps = new Array();

    function doMaps(){$.getJSON("map-locations.json", function(results) {
    //var JSONdata = JSON.parse(results);
    //alert(results);

    $.each(results, function(index, val) {
        var mapdiv = results[index].mapdiv;
        var destlat = results[index].destination.lat;
        var destlon = results[index].destination.lon;
        var desttitle = results[index].destination.title;
        var orglat = results[index].origin.lat;
        var orglon = results[index].origin.lon;
        var cntlat = results[index].center.lat;
        var cntlon = results[index].center.lon;
        var zoom = results[index].zoom;

         var route;
         var map;
           map = new GMaps({
            el: '#'+mapdiv,
            lat: cntlat,
            lng: cntlon,
            width: '750px',
            height: '580px',
            zoom: zoom
           });

           map.addMarker({
             lat: destlat,
             lng: destlon,
             title: desttitle,
             infoWindow: {
                 content: '<p>'+desttitle+'</p>'
                 }
           });
           map.addMarker({
             lat: orglat,
             lng: orglon,
             title: 'You Are Here',
             infoWindow: {
                 content: '<p>You Are Here</p>'
                 }
           });

           setTimeout(function() {
            map.getRoutes({
                           origin: [orglat, orglon],
                           destination: [destlat, destlon],
                           travelMode: 'driving'

                       });
            }, 1000);


           var mapData = new Array();
           mapData[0] = mapdiv;
           mapData[1] = map;
           maps.push(mapData);
           });
           });
        };


          //retrieve mapData
         var mapData = $.grep(maps, function(mapData) {
                return mapData[0] === mapdiv;
            });

            map = mapData[0][1];