gmap3被渲染到中心

我有一個小小的問題，下面的代碼。gmap3被渲染到中心

我在一個php文件中使用這段代碼，我從數據庫中獲得一些地址並將它們固定在地圖上。我的問題是：如果我不知道最大緯度座標，我該如何將地圖渲染到中心？我試圖使用地圖：{中心：真，縮放：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>

來源

2012-03-13 Peter

最近我有這個問題，但我只是用普通的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-15 03:18:52

非常感謝你。我會盡力回覆你。 – Peter 2012-03-16 09:24:51

您可以訪問標記的座標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-15 03:42:34

謝謝你的回覆，我會試試看，回到你身上發生了什麼事。 – Peter 2012-03-16 09:24:17

我使用{ 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"} 
    ); 
}

來源

2012-03-19 16:46:11 user1279087

gmap3被渲染到中心

回答

相關問題