自定义谷歌地图没有缩小

时间:2014-02-05 14:46:28

标签: javascript html5 google-maps

我有一个自定义谷歌地图here,其中有几个地点固定在它上面。

由于某种原因,更改zoom值时地图不会缩小:

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(59.265881,20.515594),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControlOptions: {
         position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });

任何想法可能导致它?

其余的剧本:

var locations = [
      ['html', coordinates],
      ['html', coordinates],
      ['html', coordinates], 
      ['html', coordinates], 
      ['html', coordinates], 
    ];

    // Setup the different icons and shadows
    var iconURLPrefix = 'http://www.bridgingthebaltic.org/wp-content/themes/dante-child/images/';

    var icons = [
      iconURLPrefix + 'map_icon.png',
      iconURLPrefix + 'map_icon.png',
      iconURLPrefix + 'map_icon.png',
      iconURLPrefix + 'map_icon.png',
      iconURLPrefix + 'map_icon.png',
      iconURLPrefix + 'map_icon.png',
    ]
    var icons_length = icons.length;


    var shadow = {
      anchor: new google.maps.Point(15,33),
      url: iconURLPrefix + 'map_icon.png'
    };

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(59.265881,20.515594),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControlOptions: {
         position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });

    var infowindow = new google.maps.InfoWindow({
      maxWidth: 450
    });

    var marker;
    var markers = new Array();

    var iconCounter = 0;

    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon : icons[iconCounter],
        shadow: shadow
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));

      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= icons_length){
        iconCounter = 0;
      }
    }



    function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
        bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    AutoCenter();

1 个答案:

答案 0 :(得分:1)

  

由于某种原因,在更改缩放值时地图不会缩小

原因是地图上的此代码会使其始终缩放以适合计算的界限:

   function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
        bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }

如果您希望它使用地图属性中的缩放集,请删除对该功能的调用。