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

Question

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

这是我的 map :

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 (不精确，因为该项目非常大，但 map 部分完全相同)。

http://jsfiddle.net/jboaj8zn/

尽管如此，这个问题在 JSFiddle 上是观察不到的。当我在本地主机和手机上运行我的应用程序时，我可以看到它。

Answer 1

这里发生的情况是，在您完成样式设置之前， map 本身正在渲染。根据初步观察，我猜测移动设备上的节流可能是罪魁祸首。您提到您无法在 fiddle 中观察到这一点，但是注入(inject) $timeout 并制作以下​​内容，您可以模拟延迟 - 显示原始 map => 延迟 => 样式 map 。为什么会出现这样的情况呢？不确定，可能有几个因素。

$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

<小时/>

但是，仔细阅读文档并仔细观察，您似乎可以用更好的方式初始化 map 。为此，我在定义 $scope.map 时立即设置了 map 样式，这应该可以减轻自定义样式之前发生的任何处理延迟。

看来，您正在制作一张 map ，然后重新设计了一张新 map - 没有捕获机会立即对原始 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 延迟，以这种方式创建 map 也将始终第一次获得正确的样式。

Working JSFiddle Link