fitbound后如何将谷歌地图居中

玛雅克·博特拉

我需要谷歌地图方面的帮助。fitbound 后我无法降低谷歌地图中的缩放级别。问题是我得到了一个非常高缩放的谷歌地图。我曾尝试将缩放级别设置为 5(如您在代码中所见),但这对高度缩放的地图没有影响。我想实现这一目标在此处输入图片说明

但现在它是这样的:http : //redstoneinfotech.com/OSAcontact/

这是 map.js

window.map = {
  map_type: 'ROADMAP',
  map_zoom: 5,
  map_style: 'blackwhite',
  map_scrollable: 'on',
  marker: 'show',
  label: ['Castle Hill', 'Sydney', 'Melbourne', 'Milton', 'Brooklyn Park', 'Wangara '],
  address: '',
  latlng: ['-33.7301484, 150.9626532', '-33.8473567, 150.6517813',
    '-37.970154, 144.4926753 ', ' - 27.4691402, 152.9962768 ',
    ' - 34.9303517, 138.5346949 ', ' - 31.7928896, 115.8157212 '
  ],
  center_latlng: '',
  markerURL: 'assets/images/marker.png',
  auto_center: true,
};

'use strict';

jQuery(document).ready(function($) {

  $('.google-map').each(function() {
    var mapDiv = $(this);
    var mapData = window[mapDiv.attr('id')];

    function createMap() {
      var style = [{
        'stylers': [{
          'saturation': -100
        }]
      }];

      var options = {
        zoom: parseInt(mapData.map_zoom, 5),
        scrollwheel: false,
        draggable: mapData.map_scrollable === 'on',
        mapTypeId: google.maps.MapTypeId[mapData.map_type]
      };

      if (mapData.map_style === 'blackwhite') {
        options.styles = style;
      }

      return new google.maps.Map(mapDiv[0], options);
    }

    // create map
    var map = createMap();

    // create bounds in case we dont have center map coordinates
    // every time a marker is added we increase the bounds
    var bounds = new google.maps.LatLngBounds();

    function addMarker(position, index) {
      if (mapData.marker === 'show') {
        var image = {
          url: mapData.markerURL,
          size: new google.maps.Size(30, 48),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(10, 40)
        };

        var marker = new google.maps.Marker({
          position: position,
          icon: image,
          map: map
        });

        // extend bounds to encase new marker
        bounds.extend(position);

        // add label popup to marker
        if (mapData.label[index] !== undefined) {
          var infoWindow = new google.maps.InfoWindow({
            content: mapData.label[index]
          });
          google.maps.event.addListener(marker, 'click', function(e) {
            infoWindow.open(map, this);
          });
        }

      }
    }

    // centre map

    var centerMapWithCoordinates = !mapData.auto_center;
    if (centerMapWithCoordinates) {
      if (mapData.center_latlng !== undefined) {
        var center_lat_lng = mapData.center_latlng.split(',');
        var center_map = new google.maps.LatLng(center_lat_lng[0], center_lat_lng[1]);
        map.setCenter(center_map);
      } else {
        console.log('You have not set any coordinates for the map to be centered at.');
      }
    }

    // create markers
    if (mapData.address) {
      // lookup addresses
      var markerAddressCount = 0;
      $.each(mapData.address, function(index, address) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          'address': address
        }, function(results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
            if (undefined !== results[0]) {
              var location = results[0].geometry.location;
              var position = new google.maps.LatLng(location.lat(), location.lng());
              addMarker(position, index);
            }

            // increment count so we can keep track of all markers loaded
            markerAddressCount++;
            // if all markers are loaded then fit map
            if (!centerMapWithCoordinates && markerAddressCount === mapData.address.length) {
              map.fitBounds(bounds);
            }
          } else {
            console.log('Geocode was not successful for the following reason: ' + status);
          }
        });
      });
    } else if (undefined !== mapData.latlng) {
      for (var i = 0; i < mapData.latlng.length; i++) {
        var coordinates = mapData.latlng[i].split(',');
        var position = new google.maps.LatLng(coordinates[0], coordinates[1]);
        addMarker(position, i);
      }
      if (!centerMapWithCoordinates) {
        map.fitBounds(bounds);
      }
    }

    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
      this.setZoom(5);
      google.maps.event.removeListener(boundsListener);
    });
  });
});

我尝试了很多选择,但没有一个有效。请帮忙。

莫什明火

据我所知,问题出在 Google Maps sdk 上。为什么?因为他们bounds_changedfitBounds实际结束之前调用回调
这就是为什么它导致缩放不起作用的原因,因为他们没有完成缩放它作为边界变化的一部分fitBounds

因此,解决办法是把setZoomsetTimeout这样,这段代码只有在当前进程执行完后才会运行 - fitBounds

setTimeout(() => {
  this.setZoom(5);
}, 0);

这个对我有用。请让我知道这对你有没有用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用输入的邮政编码将谷歌地图居中

来自分类Dev

如何将谷歌地图添加到照明元素?

来自分类Dev

如何使谷歌地图不居中,而是略高于中心?

来自分类Dev

如何将坐标对从字符串转换为谷歌地图多边形的数组?

来自分类Dev

如何将mosmap谷歌地图嵌入到非joomla网页中?

来自分类Dev

如何将变量传递到谷歌地图的目的地

来自分类Dev

如何将字符串转换为谷歌地图javascript中的折线路径

来自分类Dev

如何将谷歌地图设置为移动/视网膜模式 (?) - 难以辨认的地点标签

来自分类Dev

如何将http请求发送到谷歌地图api

来自分类Dev

如何将坐标列表传递给默认的谷歌地图应用程序?

来自分类Dev

如何将谷歌地图时间线 Json 数据导入 DataFrame

来自分类Dev

如何将安卓谷歌地图限制到一个城市?

来自分类Dev

如何将谷歌地图定位在前一个div的下方?

来自分类Dev

如何将鼠标悬停在谷歌地图标记上滚动窗口

来自分类Dev

如何将居中图表的条形居中?

来自分类Dev

如何将居中图表的条形居中?

来自分类Dev

如何将图像居中

来自分类Dev

如何将内容居中

来自分类Dev

如何将列表居中

来自分类Dev

如何将标题居中?

来自分类Dev

如何将内容居中

来自分类Dev

如何使用 iframe 将 Google 地图居中?

来自分类Dev

如何将背景大小调整为使用画布,谷歌地图创建的标记上的字体大小?

来自分类Dev

谷歌地图作为背景与居中的列

来自分类Dev

谷歌地图在点上自动居中

来自分类Dev

如何抓取谷歌地图?

来自分类Dev

如何过滤谷歌地图

来自分类Dev

如何将元素水平居中

来自分类Dev

如何将绝对定位的元素居中?

Related 相关文章

热门标签

归档