2012-08-03 105 views
2

我有以下代碼如何映射。一切工作正常,除了縮放參數。無論我爲縮放設置什麼,它總是顯示相同的縮放級別。我能做什麼?jquery-ui-map設置縮放級別

$('#pagemap').live("pageshow", function() { 

      $('#map_canvas').gmap().bind('init', function(evt, map) { 

       $('#map_canvas').gmap('getCurrentPosition', function(position, status) { 

         if (status === 'OK') { 

          var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

          $('#map_canvas').gmap('option', 'mapTypeId', google.maps.MapTypeId.SATELLITE); 

          $('#map_canvas').gmap('option', 'zoom', 13);    

          $('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': true}); 

         } 
       }); 
      }); 
     }); 

回答

5

您需要將標記的'bounds'選項更改爲false。

$('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': false});

如果設置該屬性範圍爲true,地圖將計算視窗,並自動變焦,覆蓋任何變焦集的構造器 大段引用

this是更多的鏈接信息

0

我正面臨着該解決方案的問題。如果我將邊界設置爲false,則地圖保持居中於其初始中心座標。好吧。那麼爲什麼我的地圖集中在一個很遠的地方?好的,沒問題。但是如果我仍然想在添加標記後設置特定的縮放級別?

$("your-selector").gmap('addMarker', { 
    'position': latlng, 
    'bounds': true 
}, function(map, marker) { 
    map.set('zoom', 12); 
}).click(function() { 
    $(this.container).gmap('openInfoWindow', { 'content': 'TEXT_AND_HTML_IN_INFOWINDOW' }, this); 
}); 

你只是回調gmap函數。但是,人們是不是應該糾正這個插件API文檔中的所有斷開鏈接?是不是應該爲任何插件編寫精心指定和清晰的Javascript文檔?讓我們互相幫助,這種方式非常複雜。我們失去了很多時間。

0

試試這個,看看這個 「縮放:9」 在縮放級別代碼...

<div id="MyDivScrolling"> 
    <div> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC8KY7rkZP7Xyq5oVM0nssUc4OPIP7MQtw&callback=initMap"></script> 
     <script type="text/javascript"> 
      var markers = [{ 
      "title": 'Havana', 
      "lat": '23.1330200', 
      "lng": '-82.3830400', 
      "description": 'José Martí International Airport, Havana' 
     } 
    , 
     { 
      "title": 'Tampa', 
      "lat": '27.964157', 
      "lng": '-82.452606', 
      "description": 'Tampa International Airport, Tampa' 
     } 
    , 
     { 
      "title": 'Orlando', 
      "lat": '28.538336', 
      "lng": ' -81.379234', 
      "description": 'Orlando International Airport, Orlando' 
     } 
    , 
     { 
      "title": 'Havana', 
      "lat": '23.1330200', 
      "lng": '-82.3830400', 
      "description": 'José Martí International Airport, Havana' 
     } 

    , 
     { 
      "title": 'Havana', 
      "lat": '23.1330200', 
      "lng": '-82.3830400', 
      "description": 'José Martí International Airport, Havana' 
     } 
     , 
     { 
      "title": 'Miami', 
      "lat": '25.7742700', 
      "lng": '-80.1936600', 
      "description": 'Miami International Airport, Miami' 
     } 
    , 
     { 
      "title": 'Camagüey-Ignacio Agramonte', 
      "lat": '21.416666666667', 
      "lng": '-77.866666666667 ', 
      "description": 'Camagüey-Ignacio Agramonte Airport, Camagüey' 
     } 


     , 
      { 
       "title": 'Camagüey-Ignacio Agramonte', 
       "lat": '21.416666666667', 
       "lng": '-77.866666666667 ', 
       "description": 'Camagüey-Ignacio Agramonte Airport, Camagüey' 
      } 
      , 
     { 
      "title": 'Tampa', 
      "lat": '27.964157', 
      "lng": '-82.452606', 
      "description": 'Tampa International Airport, Tampa' 
     }]; 
      window.onload = function() { 
       var mapOptions = { 
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng), 
        zoom: 9, 
        mapTypeId: google.maps.MapTypeId.Streapmap 
       }; 
       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++) { 
        var data = markers[i] 
        var myLatlng = new google.maps.LatLng(data.lat, data.lng); 
        lat_lng.push(myLatlng); 
        var marker = new google.maps.Marker({ 
         position: myLatlng, 
         map: map, 
         title: data.title 
        }); 
        latlngbounds.extend(marker.position); 
        (function (marker, data) { 
         google.maps.event.addListener(marker, "click", function (e) { 
          infoWindow.setContent(data.description); 
          infoWindow.open(map, marker); 
         }); 
        })(marker, data); 
       } 
       map.setCenter(latlngbounds.getCenter()); 
       map.fitBounds(latlngbounds); 

       //***********ROUTING****************// 

       //Intialize the Path Array 
       var path = new google.maps.MVCArray(); 

       //Intialize the Direction Service 
       var service = new google.maps.DirectionsService(); 

       //Set the Path Stroke Color 
       var poly = new google.maps.Polyline({ map: map, strokeColor: 'Blue' }); 

       //Loop and Draw Path Route between the Points on MAP 
       for (var i = 0; i < lat_lng.length; i++) { 
        if ((i + 1) < lat_lng.length) { 
         var src = lat_lng[i]; 
         var des = lat_lng[i + 1]; 
         path.push(src); 
         poly.setPath(path); 
         service.route({ 
          origin: src, 
          destination: des, 
          travelMode: google.maps.DirectionsTravelMode.DRIVING 
         }, function (result, status) { 
          if (status == google.maps.DirectionsStatus.OK) { 
           for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
            path.push(result.routes[0].overview_path[i]); 
           } 
          } 
         }); 
        } 
       } 
      } 
     </script> 
     <div class="MainSliderItem2 ImagesContainerItem"> 
      <div id="dvMap" style="width: 100%;height: 490px;position: relative;overflow: hidden;background-color: rgb(229, 227, 223);max-width: 80%;margin: 98px auto;"> 
      </div> 
     </div> 
    </div> 
</div>