加载谷歌地图样式的短暂延迟

Question

所以，我使用 Ionic Framework 来创建移动应用程序。我使用 AngularJS 和 Google Maps API。最近，我遇到了一个烦人的问题。每当地图加载时，加载地图样式都会有短暂的延迟（但很明显）。由于我的地图样式将地图更改为黑白，因此这是有问题的。当我在浏览器和手机中运行应用程序时，它都是可见的。解决此问题的最佳方法是什么？

这是我的地图：

var styledMap = new google.maps.StyledMapType(MAP_STYLE,{name: "Styled Map"});


var mapOptions = {
  center: { lat: Map.getMapPosition().k, lng: Map.getMapPosition().D },
  zoom: 13,
  maxZoom: 18,
  minZoom: 13,
  zoomControl: true,
  draggable: true,
  disableDoubleClickZoom: true,
  disableDefaultUI: true,
  mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
  }
};


MY.map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
MY.map.mapTypes.set('map_style', styledMap);
MY.map.setMapTypeId('map_style');

还有下面的map_style：

.constant('MAP_STYLE', [
{
"featureType": "landscape",
"stylers": [
  {
    "saturation": -100
  },
  {
    "lightness": 65
  },
  {
    "visibility": "on"
  }
]},    
{
"featureType": "poi",
"stylers": [
  {
    "saturation": -100
  },
  {
    "lightness": 51
  },
  {
    "visibility": "simplified"
  }
]},    
{
"featureType": "road.highway",
"stylers": [
  {
    "saturation": -100
  },
  {
    "visibility": "simplified"
  }
]},
{
"featureType": "road.arterial",
"stylers": [
  {
    "saturation": -100
  },
  {
    "lightness": 30
  },
  {
    "visibility": "on"
  }
]},    
  {"featureType": "road.local",
"stylers": [
  {
    "saturation": -100
  },
  {
    "lightness": 40
  },
  {
    "visibility": "on"
  }
]},
   {"featureType": "transit",
"stylers": [
  {
    "saturation": -100
  },
  {
    "visibility": "simplified"
  }
]},
{"featureType": "administrative.province",
"stylers": [
  {
    "visibility": "off"
  }]},    
{"featureType": "water",
"elementType": "labels",
"stylers": [
  {
    "visibility": "on"
  },
  {
    "lightness": -25
  },
  {
    "saturation": -100
  }
]},
  {
"featureType": "water",
"elementType": "geometry",
"stylers": [
  {
    "hue": "#ffff00"
  },
  {
    "lightness": -25
  },
  {
    "saturation": -97
  }
]}])

我正在添加具有类似代码的 JSFiddle（不完全是因为项目非常大，但地图部分完全相同）。

http://jsfiddle.net/jboaj8zn/

不过，在 JSFiddle 上无法观察到该问题。当我在 localhost 和手机上运行我的应用程序时，我可以看到它。

Answer 1

这里似乎发生了什么，是地图本身在您完成样式之前正在渲染。在最初的观察中，我猜测移动设备上的节流可能是罪魁祸首。您提到您无法在小提琴中观察到这一点，但是注入 $timeout 并制作以下​​内容，您可以模拟延迟 - 显示原始地图 => 延迟 => 样式地图。为什么会发生这种情况？不确定，可能是几个因素。

$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

$timeout(function() { 
    $scope.map.mapTypes.set('map_style', styledMap);            
    $scope.map.setMapTypeId('map_style');
}, 1000);

查看延迟示例 - JSFiddle Link

---

但是，通过查看文档并仔细观察这一点，您似乎可以更好地初始化地图。为了解决这个问题，我在定义 $scope.map 时立即设置了地图样式，这应该可以缓解在自定义样式之前发生的任何处理延迟。

看来，您正在制作一张地图，然后重新设计了一张重新设计的地图 - 没有立即为原件设计风格。为什么不提前做呢？

你可以用下面的逻辑替换之前的逻辑

var mapOptions = {
    zoom: 4,
    styles: MAP_STYLE, // <---- set style here!
    center: new google.maps.LatLng(40.0000, -98.0000),
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
}

$scope.map = new google.maps.Map(document.getElementById('map'));

$scope.map.setOptions(mapOptions);

// -- var styledMap = new google.maps.StyledMapType(MAP_STYLE, {name: "Styled Map"});

// -- $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

---

即使在第一个示例中包含 $timeout 延迟，以这种方式创建我们的地图也将始终在第一次获得正确的样式。

Working JSFiddle Link