2

以下のコードに少し問題があります。

このコードを 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>
4

3 に答える 3

3

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){}
         }
于 2012-03-15T03:42:34.593 に答える
1

私は最近この問題を抱えていましたが、実際にはより簡単だと思う通常の 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 );
于 2012-03-15T03:18:52.677 に答える
-1

{action:"autofit"} コマンドを使用します。PHP から渡された JSON を読み取る Javascript コード (AJAX コールバックでエコーを使用するだけの Yii フレームワーク) と、クラスタリング:

/*
 * 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"}
    );
}
于 2012-03-19T16:46:11.840 に答える