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

Retrieve Google Map object after creation Javascript/JQuery

本文关键字:Google Map 对象 检索 Javascript JQuery 创建      更新时间:2023-09-26

我想知道是否有办法在创建后检索google.maps.map对象? 我需要在我的页面中创建多个地图,并且我正在使用一个函数来遍历 JSON 来创建地图。 因此,我没有留下一个全局"地图"对象,我需要能够不时地重新定位地图。 问题是,我不知道如何让"map"对象重置地图的中心。 我可以通过 JQuery 选择器获取div,在那里我使用 Gmaps.js 创建了地图,我甚至可以触发"调整大小"事件作为隐藏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);
         })
         }

任何帮助将不胜感激。

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

     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];