Javascript 加载谷歌地图风格的短暂延迟

所以，我使用Ionic框架来创建移动应用程序。我使用AngularJS和谷歌地图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');

和以下地图样式：

.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
  }
]}])

我使用类似的代码添加了JSFIDLE（不确切，因为项目非常大，但是映射部分完全相同）

---

然而，这个问题在JSFIDLE上是看不到的。当我在localhost和phone上运行我的应用程序时，我可以看到它。

这里出现的情况是，在您完成样式设置之前，地图本身正在渲染。根据初步观察，我猜测移动设备上的节流可能是罪魁祸首。您提到您不能在小提琴中观察到这一点，但是注入

$timeout

并制作以下内容，您可以模拟延迟-显示原始映射=>delay=>样式化映射。为什么会发生这种情况？不确定，可能有几个因素

$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);

查看延迟示例-

---

然而，仔细阅读文档并仔细观察，似乎可以用更好的方式初始化地图。考虑到这一点，我已经在定义

$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);

var映射选项={
缩放：4，
样式：MAP\u STYLE，//什么是
MY\u STYLE
？使用属性的内部API名称（
.k
，
.D
）是不好的做法，它们可以而且确实会随着API的每一个版本而改变。嘿！我不确定你称之为“我的风格”是什么？你是指“地图风格”吗？是的。如果我试图重现你的错误，则不会定义“地图风格”。请提供一个显示问题的示例。抱歉，我刚刚编辑了它！正如@geocodezip试图解释的那样，如果你不给我们一个说明，就很难帮助你king示例（比如JSFIDLE之类的）在其中一个我们可以看到这个delayWokrs很棒！我想知道为什么在文档中他们会推荐另一种方式…非常感谢！！！@uksz不确定，但我也注意到文档中的样式设计有点棘手。你之前更新了两张地图，现在我们只需要一次调用
new google.maps
-这很理想。我很高兴这对你和我来说都解决了如果你觉得这有帮助，请记得奖励赏金。快乐编码：）哦，对不起，这是我的第一次赏金，我不知道我必须手动完成：）再次感谢，你节省了很多时间！