2015-04-02 67 views
-2

嗨在我的谷歌地图,我只画了一个标记,当地图加载。但然后地图放大完全在哪个是真正令人困惑。但是当我绘制多个标记图时,图形居中并放大到某个水平。它如何克服这一点。 我的绘制标记函数中有一个循环,并且只有一个具有坐标的对象。当我从'标记'地图得到多个对象时,地图正确居中。但是当它只有一个对象循环时。标记被绘制,但地图没有得到很好的居中并缩放(在完全放大)谷歌地图完全缩小

function drawMarkers(markerList) { 
        debugger; 

         var mapOptions = { 
          center: new google.maps.LatLng(-24.504710, 134.039231), 
          zoom: 4, 
          mapTypeId: google.maps.MapTypeId.ROADMAP 
         }; 
         var currentLocation; 
         var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
         var infoWindow = new google.maps.InfoWindow(); 

         var lat_lng = new Array(); 
         var latlngbounds = new google.maps.LatLngBounds(); 
         for (i = 0; i < markers.length; i++) { 
          //if (markerList[i].Longitude > 0) { 
          var data = markerList[i] 
          var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude); 
          lat_lng.push(myLatlng); 


          var marker = new google.maps.Marker({ 
           position: myLatlng, 
           map: map, 
           title: data.DriverName, 

          }); 

          var driverCurrentLocation = document.getElementById('<%= hdfDriverCurrentLocation.ClientID %>').value; 

          latlngbounds.extend(marker.position); 
          //if (markerList[i].Longitude > 0) { 
          (function (marker, data) { 
           google.maps.event.addListener(marker, "click", function (e) { 
            debugger; 
            var lat = data.Latitude; 
            var lng = data.Longitude; 
            var latlng = new google.maps.LatLng(lat, lng); 
            var geocoder = geocoder = new google.maps.Geocoder(); 
            geocoder.geocode({ 'latLng': latlng }, function (results, status) { 
             if (status == google.maps.GeocoderStatus.OK) { 
              if (results[1]) { 
               currentLocation = results[1].formatted_address; 
              } 
              infoWindow.setContent('<div style="overflow: auto;width: 275px;">' + 
             '<div id="leftSideMainDiv" class="col25" style="padding-Left:0px; width:22%;">' + 
             '<div class="col100"><img src="../Images/DriverImages/driver_icon.jpg" height="60" width="60"/></div>' + 

             '</div>' + 

             '<div id="RightSideMainDiv" class="col75" style="width:72%;">' + 
             '<div class="col100" style="font-weight:bold; padding-top:0px; padding-left:0px; font-size:smaller;"> ' + data.DriverName + '</div>' + 
             '<div style="font-size:smaller; padding-top:15px;">Job Number :' + data.JobId + ' - ' + data.JobType + '</div>' + 
             '<div style="font-size:smaller;">Delivery Address :' + data.DeliveryAddress + '</div>' + 
             '<div style="font-size:smaller;">Current Location :' + currentLocation + '</div>' + 
             '<div style="font-size:smaller;">Last Update :' + data.LastUpdatedTime + '</div>' + 
             '</div>'); 

              infoWindow.open(map, marker); 
             } 
            }); 

           }); 
          })(marker, data); 
         //} 
          } 
         //} 
         map.setCenter(latlngbounds.getCenter()); 
         map.fitBounds(latlngbounds); 
         map.setZoom(5); 

       } 
+0

一些代码?加载地图时可以轻松控制缩放。 – 2015-04-02 08:34:51

+0

我在地图选项中做了这个。但没有工作 – SINFER 2015-04-02 08:55:18

+0

可能重复的[如何在谷歌地图中设置缩放级别](http://stackoverflow.com/questions/11454229/how-to-set-zoom-level-in-google-map) – mate64 2015-04-02 15:13:56

回答

0

相关问题:How to set zoom level in google map

如果你只有一个标记(markers.length == 1),那就不叫map.fitBounds()。更改:

map.setCenter(latlngbounds.getCenter()); 
map.fitBounds(latlngbounds); 
map.setZoom(5); 

要:

map.setCenter(latlngbounds.getCenter()); 
if (marker.length != 1) map.fitBounds(latlngbounds); 
map.setZoom(5); 
0
在地图上的初始化

设置缩放级别,这里的变焦设置为5

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    google.maps.event.addDomListener(window, 'load', function() { 
       map.setZoom(5); 
     }); 

添加地图

var map; 

,然后地图的功能范围的变量外修改地图内的线功能 -

map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 

然后调用地图功能drawMarkers(markerList)后,你需要设置缩放原样

$(document).ready(function(){ 
    drawMarkers(markerList) 
    google.maps.event.addDomListener(window, 'load', function() { 
      map.setZoom(5); 
    }); 
}); 

让我知道你的作品!

+0

didn 't work Manoz – SINFER 2015-04-02 08:59:13

+0

@ user3671284,你怎么接近这个?我刚刚在我的本地测试 – Manoj 2015-04-02 09:00:48

+0

我编辑了我的问题 – SINFER 2015-04-02 09:08:58