Question

我遇到的问题是我的谷歌地图只显示了一些时间。大多数情况下，即使没有地图，也可以看到我的地方标记。其他时候一切都显示和工作应有的。

编辑我注意到，当我添加时，地图会正确显示另一个地图占位符（如下面的HTML代码），代码运行两次。

<div ng-show="false">
    <og-google-map twitter="twitterLocations" instagram="instagramLocations"></og-google-map>
</div>

我不确定是否存在我的地图未下载或渲染，或者是否隐藏的情况。

但是，在开发人员工具中，我在我的<div>我的地图呈现中选择了以下更改：当地图显示时，有2个<div>带有“ transform-origin“样式属性。

见下图：

当地图显示时：

当地图未显示时：

with transform-origin展开了：

以下是我使用的代码：

我正在使用以下Angular Directive作为地图：

'use strict';

angular.module('portalDashboardApp')
  .directive('ogGoogleMap', function ($http, $q) {
      return {
          restrict: 'E',
          scope: {
              twitter: '=',
              instagram: '='
          },
          template: '<div id="gmaps"></div>',
          replace: true,
          link: function (scope, element, attrs) {

              var map, infoWindow;
              var markers = [];

              // map config
              var mapOptions = {
                  center: new google.maps.LatLng(-0.013026, 21.333860),
                  zoom: 4,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };

              // init the map
              function initMap() {
                  if (map === void 0) {
                      map = new google.maps.Map(element[0], mapOptions);
                  }
              }

              // place a marker
              function setMarker(map, position, title, content, icon) {

                  if (icon === 'IN') {
                      icon = 'images/instagramMarker.png';
                  }
                  else {
                      icon = 'images/twitterMarker.png';
                  }

                  var marker;
                  var markerOptions = {
                      position: position,
                      map: map,
                      title: title,
                      icon: icon
                  };

                  marker = new google.maps.Marker(markerOptions);
                  markers.push(marker); // add marker to array

                  google.maps.event.addListener(marker, 'click', function () {
                      // close window if not undefined
                      if (infoWindow !== void 0) {
                          infoWindow.close();
                      }
                      // create new window
                      var infoWindowOptions = {
                          content: content
                      };
                      infoWindow = new google.maps.InfoWindow(infoWindowOptions);
                      infoWindow.open(map, marker);
                  });
              }

              function getMentionAddress(latitude, longitude) {

                  var addressData = $q.defer();

                  $http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude)
                    .success(function (data) {
                        addressData.resolve(data.results[0].formatted_address);
                    })
                    .error(function (data, status) {
                        console.error('Google Maps API error', status, data);
                    });

                  return addressData.promise;

              }

              function deleteCurrentMarkers() {
                  for (var i = 0; i < markers.length; i++) {
                      markers[i].setMap(null);
                  }
                  markers = [];
              }

              scope.$watch('instagram', function () {
                  deleteCurrentMarkers();
                  populateMarkers(scope.twitter, 'TW');
                  populateMarkers(scope.instagram, 'IN');
              });

              // show the map and place some markers
              initMap();

              function populateMarkers(locationArray, type) {

                  angular.forEach(locationArray, function (location) {

                      setMarker(map, new google.maps.LatLng(location[0], location[1]), '', '', type);

                  });

              }

          }
      };
  });

这是地图的HTML占位符：

<div ng-show="!demographics.showDemographicsGraph">
    <og-google-map twitter="twitterLocations" instagram="instagramLocations"></og-google-map>
</div>

这是我的CSS：

#gmaps {
    width: 100%;
    height: 500px;
}

任何帮助将不胜感激！

Google地图仅在Angular App中有时可见

0 个答案: