gmap3 будет отображаться в центре

Question

У меня небольшая проблема с кодом ниже.

Я использую этот код в php-файле, где я получаю несколько адресов из базы данных и прикрепляю их на карте.Моя проблема: как я могу отобразить карту в центр, если я не знаю координаты долготы?Я пытался использовать map: {center: true, zoom: 7} (код здесь не подходит, но был в моем коде), но он не работал.

Итак, я решил, что если, скажем, я могполучить долготу и широту центра города, который я прикрепил маркерами, тогда он мог бы стать центром карты.В приведенном ниже примере, если бы я мог получить продольные координаты 'City', я мог бы сделать это в качестве центральной точки.

Мне нужна помощь в этом, или, если есть более простое решение, я был бы признателен за вашеответы.

Большое спасибо заранее.Петр

    <script type="text/javascript">

      $(function(){

        $('#test1')


          .gmap3(
          { action:'init',

            options:{

                center:[46.578498,2.457275],

                zoom: 7

            }

          },

          { action: 'addMarkers',

            markers:[

              {address: "City address 1, Country", data:'Hello1'},

              {address: "City address 2, Country", data:'Hello2'},

              {address: "City address 3, Country", data:'Hello3'}

            ],



            marker:{

              options:{

                icon: new google.maps.MarkerImage('img/gmap_pin_stay.png'),

                draggable: false

              },



             events:{

                click: function(marker, event, data){

                  var map = $(this).gmap3('get'),

                      infowindow = $(this).gmap3({action:'get', name:'infowindow'});

                  if (infowindow){

                    infowindow.open(map, marker);

                    infowindow.setContent(data);

                  } else {

                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:
{content: data}});

                  }

                },             

              }

            }

          }

        );

      });

    </script>

Answer 1

Вы можете получить доступ к координатам маркеров в обратном вызове addMarkers и затем использовать их для центрирования карты:

callback:function(m)
         { //m will be the array of markers
           var bounds=new google.maps.LatLngBounds();
           for(var i=0;i<m.length;++i)
           {
             bounds.extend(m[i].getPosition());
           }
           try{
                var map=$(this).gmap3({action:'get'});
                    map.fitBounds(bounds);
                    map.setCenter(bounds.getCenter())
               }catch(e){}
         }

Answer 2

У меня недавно была эта проблема, однако я просто использовал обычный Javascript API, который на самом деле проще.

Мой пример немного отличается, потому что я центрирую карту на нарисованном полигоне, а не на маркерах, но идея с созданным мной методом latlngbounds одинакова в любом случае.

Вот мое решение:

var myOptions = {
  zoom: 5,
  center: new google.maps.LatLng( 0, 0 ), // this won't matter
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var region;

var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

var coords = [
  new google.maps.LatLng('37.770, -122.417'),
  new google.maps.LatLng('37.758, -122.482'),
  new google.maps.LatLng('37.750, -122.395'),
];

region = new google.maps.Polygon({
  paths: coords,
  strokeColor: "#0000ff",
  strokeOpacity: 0.55,
  strokeWeight: 2,
  fillColor: "#0000ff",
  fillOpacity: 0.15
});

region.setMap(map);

var latlngbounds = new google.maps.LatLngBounds( );
for ( var i = 0; i < coords.length; i++ ) {
  latlngbounds.extend( coords[ i ] );
}

map.fitBounds( latlngbounds );

Answer 3

Я использую команду {action: "autofit"}.При этом код Javascript, который читает JSON, передается из PHP (инфраструктура Yii, использующая эхо при обратном вызове AJAX) вместе с кластеризацией:

/*
 * Add markers as per markers array passed
 * e.g. 
 * var markersArray = [
    {lat:-25.8058,lng:28.3417,data:{drive:false,zip:1,city:"Miracles"}},
    {lat:-25.808,lng:28.315,data:{drive:true,zip:2,city:"Woodhill"}},
    {lat:-25.774,lng:28.238,data:{drive:true,zip:3,city:"Brooklyn"}},
    {lat:-25.664,lng:28.235,data:{drive:true,zip:3,city:"Giovanni"}}
  ];
 */
function addMarkers(sDiv, aMarkers) {
    $(sDiv).gmap3(
        {action:'clear'},
        {action: 'addMarkers',
            radius:100,
            markers: aMarkers,
            clusters:{
                // This style will be used for clusters with more than 0 markers
                0: {content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>', width: 53, height: 52},
                20: {content: '<div class="cluster cluster-2">CLUSTER_COUNT</div>', width: 56, height: 55},
                50: {content: '<div class="cluster cluster-3">CLUSTER_COUNT</div>', width: 66, height: 65}
            },
            marker: {
                options: {icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green.png')},
                events:{ 
                    mouseover: function(marker, event, data){
                        $(this).gmap3(
                        {action:'clear', name:'overlay'},
                        {action:'addOverlay',
                            latLng: marker.getPosition(),
                            content:  '<div class="infobulle'+(data.drive ? ' drive' : '')+'">' +
                                '<div class="bg"></div>' +
                                '<div class="text">' + data.city + ' (' + data.zip + ')</div>' +
                                '</div>' +
                                '<div class="arrow"></div>',
                            offset: {x:-46, y:-73}
                        }
                    );
                    },
                    mouseout: function(){
                        $(this).gmap3({action:'clear', name:'overlay'});
                    }
                }
            }
        },
        //http://gmap3.net/api/auto-fit.html
        {action:"autofit"}
    );
}