fit=“true” + 单个标记 => 缩放太大，角度谷歌地图，角度js

fit="true" + single marker => zoom too big , Angular-google-maps,Angular js

本文关键字：谷歌地图 js 角度缩放 true 单个标 fit 更新时间：2023-09-26

当我在页面上只有一个标记时，我正在努力设置缩放级别。页面加载时市场放大到难以看到周围区域的程度。

angular.module('appMaps', ['uiGmapgoogle-maps'])
  .controller('mainCtrl', function($scope,$http) {
    $scope.map = {
      center: {
        latitude: 0,
        longitude: 0
      },
      zoom: 2
    ,
      bounds: {}
    };
    $scope.options = {
      scrollwheel: false
    };
    var createRandomMarker = function(i, bounds, idKey) {
      var lat_min = bounds.southwest.latitude,
        lat_range = bounds.northeast.latitude - lat_min,
        lng_min = bounds.southwest.longitude,
        lng_range = bounds.northeast.longitude - lng_min;
      if (idKey == null) {
        idKey = "id";
      }
      var latitude = lat_min + (Math.random() * lat_range);
      var longitude = lng_min + (Math.random() * lng_range);
      var ret = {
        latitude: latitude,
        longitude: longitude,
        title: 'm' + i
      };
      ret[idKey] = i;
      return ret;
    };
    $scope.randomMarkers = [];
    // Get the bounds from the map once it's loaded
    $scope.$watch(function() {
      return $scope.map.bounds;
    }, function(nv, ov) {
      // Only need to regenerate once
      if (!ov.southwest && nv.southwest) {
        var markers = [];
        for (var i = 0; i < 1; i++) {
          markers.push(createRandomMarker(i, $scope.map.bounds))
        }
        //$scope.randomMarkers = markers;
      }
    }, true);
    
    disIcon = function(){
       var markers = [];
     
      var ret = {
        latitude: 32.7689285,
        longitude: -89.1079636,
        title: 'm' 
      };
      ret['id'] = 1;
       markers.push(ret);
      
     
      $scope.randomMarkers = markers;
      
     
    }
    
    disIcon();
    
  });

 html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
            margin-top:20px;
        }
        #map_canvas {
            position: relative;
        }
        .angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
 
    <script src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
    <!--script-->
    
    <style type="text/css">
        html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
            margin-top:20px;
        }
        #map_canvas {
            position: relative;
        }
        .angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="map_canvas" ng-controller="mainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds">
        <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'"  fit="true">
        </ui-gmap-markers>
    </ui-gmap-google-map>
    
   
    
</div>
<!--example-->
</body>
</html>

我所做的是在ui-gmap-markers中使用ng-if。如果 1 个标记，则使用 fit=false，如果多个标记使用 fit=true。