Question

我对下面的代码有点问题。

我在php文件中使用此代码，我从数据库中获取一些地址并将它们固定在地图上。我的问题是：如果我不知道lon lat坐标，我怎样才能将地图渲染到中心？我尝试使用map：{center：true，zoom：7}（代码在这里不合适，但在我的代码中）但它没有用。

所以我想的是，如果我可以说我可以获得市中心的经度和纬度，我用标记固定，那么它可能是地图的中心。在下面的示例中，如果我可以得到'City'的lon lat坐标，那么我可以将其作为中心点。

我需要帮助，或者如果有更简单的解决方案，我将非常感谢您的回复。

非常感谢提前。彼得

    <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代码，它读取从PHP传递的JSON（Yii框架只是在AJAX回调中使用echo）以及集群：

/*
 * 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"}
    );
}

gmap3将呈现为居中

3 个答案: