Question

我做了一个简单的AngularJS Google Map集成，带有多个标记，但我得到的只是一个“灰色/棕色屏幕”，控制台没有错误，早先从控制台清除了一些代码，但仍然没有运气。

我不认为这与标记有任何关系，我的想法是谷歌地图可能导致问题？

任何帮助都会很棒，我在下面添加了代码预览：

var myApp = angular.module("myApp", []);
myApp.directive("myMaps", function() {
  return {
    restrict: 'E',
    template: '<div></div>',
    replace: true,
    link: function(scope, element, attrs) {
      var mapOptions = {
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.SATELLITE
      };

      var cities = [{
          lat: 52.238983,
          lng: -0.888509
        },
        {
          lat: 52.238168,
          lng: -52.238168
        },
        {
          lat: 52.242452,
          lng: -0.889882
        },
        {
          lat: 52.247234,
          lng: -0.893567
        },
        {
          lat: 52.241874,
          lng: -0.883568
        }
      ];

      var map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);

      cities.forEach(function(value, index) {
        var myLatLng = new google.maps.LatLng(value.lat, value.lng);

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: "My Town"

        });

        marker.setMap(map);
      });
    }
  };
});

<html>

<head>
  <title>Angular.JS and Google Maps</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6GScFE4uWv-c27R_0rlOTApBR7KEK6DM"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  <script src="../scripts/script_test.js"></script>
  <link rel="stylesheet" media="screen" href="https://bootswatch.com/darkly/bootstrap.min.css">
  <style>
    #map {
      height: 700px;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="row">
    <div class="col-md-12">
      <span class="text-center">
      <img src="https://s26.postimg.org/pxgc1jo0p/angular-card.png" class="img-responsive" style="width:20%;">
  </span>
    </div>
  </div>
  <div ng-app="myApp">
    <my-maps id="map"></my-maps>
  </div>
</body>

</html>

Answer 1

也需要指定地图中心，可以设置：

明确地通过setCenter function
地图可以通过fitBounds function自动居中，以在视口中显示标记（在这种情况下，不需要指定zoom和center属性）

如何自动居中地图

根据提供的示例，地图可以像这样居中：

var bounds = new google.maps.LatLngBounds();
cities.forEach(function (value, index) {
     var myLatLng = new google.maps.LatLng(value.lat, value.lng);
     bounds.extend(myLatLng);

     var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: "My Town"
     });
});
map.fitBounds(bounds);

以下是已修改的示例：

＆＃13;

var myApp = angular.module("myApp", []);
myApp.directive("myMaps", function () {
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function (scope, element, attrs) {
            var mapOptions = {
                //zoom: 10,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            };

            var cities = [{
                lat: 52.238983,
                lng: -0.888509
            },
            {
                lat: 52.238168,
                lng: -52.238168
            },
            {
                lat: 52.242452,
                lng: -0.889882
            },
            {
                lat: 52.247234,
                lng: -0.893567
            },
            {
                lat: 52.241874,
                lng: -0.883568
            }
            ];

            var map = new google.maps.Map(document.getElementById(attrs.id), mapOptions);
            var bounds = new google.maps.LatLngBounds();
            cities.forEach(function (value, index) {
                var myLatLng = new google.maps.LatLng(value.lat, value.lng);
                bounds.extend(myLatLng);

                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: "My Town"
                });
                //marker.setMap(map);
            });
            map.fitBounds(bounds);
        }
    };
});

＆＃13;

#map {
          height: 700px;
          width: 100%;
  }

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
 <script src="app.js"></script>
 <link rel="stylesheet" media="screen" href="https://bootswatch.com/darkly/bootstrap.min.css">
<div class="row">
        <div class="col-md-12">
          <span class="text-center">
          <img src="https://s26.postimg.org/pxgc1jo0p/angular-card.png" class="img-responsive" style="width:20%;">
      </span>
</div>
</div>
<div ng-app="myApp">
     <my-maps id="map"></my-maps>
</div>

＆＃13;

AngularJS +谷歌地图（多个标记）

1 个答案: