短暂的延迟加载谷歌地图风格 [英] Short delay in loading google maps style

问题描述

所以，我用离子框架来创建移动应用程序。我用AngularJS，和谷歌地图API。最近，我碰到一个恼人的问题。该地图加载每当有在加载地图的风格在短暂的延迟（但明显）。由于我的地图的风格改变了地图，黑色和白色，这是有问题的。这既当我在浏览器中运行的应用程序，以及在我的手机是可见的。什么是解决这一问题的最佳方式是什么？

So, I use Ionic Framework to create mobile app. I use AngularJS, and Google Maps API. Recently, I came across one annoying problem. Whenever the map loads, there is a short delay (but noticeable) in loading map style. Since my map style changes the map to black-and-white, this is problematic. It is visible both when I run app in my browser, as well as in my phone. What is the best way to solve this issue?

下面是我的图：

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：

And map_style below:

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

我有类似code添加的jsfiddle（不准确，因为该项目是非常大的，但是在地图的部分是完全一样的）。

I am adding JSFiddle with similar code (not exact because the project is really big, however the map part is exactly the same).

http://jsfiddle.net/jboaj8zn/

然而，问题是不能在的jsfiddle观察到。当我在本地主机上和手机上运行我的应用程序，我可以看到它。

Nevertheless, the problem is not observable on the JSFiddle. When I run my app on localhost and on phone, I can see it.

推荐答案

这似乎是怎么回事，是自身渲染之前就可以完成你的造型地图。经初步观察，我猜节流在移动设备上可能是罪魁祸首。你提到你不能在拨弄观察这一点，但注入 $超时和起草以下，可以模拟对延迟显示原始地图=>延迟=>病急乱投医地图。为什么会发生这种情况？不确定，可能是几个因素。

What appears to be going on here, is the map itself is rendering before you can complete your styling. Upon initial observation, I guessed throttling on mobile devices could be to blame. You mentioned you can't observe this in the fiddle, but injecting $timeout and crafting the following, you can simulate a delay- showing the original map => delay => styled map. Why this would happen? Unsure, could be a few factors.

$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链接

View Delayed example - JSFiddle Link

不过，经历的文档和观察这个有点接近，看来你可能会初始化您的地图更好的办法。玩这个的时候，我已经定义时，立即设置地图样式 $ scope.map ，这应减轻您的自定义造型前发生的任何处理延迟。

However, going through the docs and observing this a bit closer, it appears you could be initializing your map a better way. Playing around with this, I've set the map style immediately when defining $scope.map, which should alleviate any processing delays occurring before your custom styling.

它的出现，你制作一个地图，然后newing了一个重新风格的单不利用这个机会，立即样式原件。为什么不这样做在前面？

It appears, you were crafting a map, then newing up a re-styled one- not taking the opportunity to style the original immediately. Why not do so up front?

您可以使用以下

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

---

即使有包括 $超时延迟，如在第一个例子中，创造我们的地图这种方式将总是获取正确的样式第一时间。

---

Even with the included $timeout delay such as in the first example, creating our map this way will always get the correct style the first time.

这篇关于短暂的延迟加载谷歌地图风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！