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并制作以下内容，你可以模拟延迟 - 显示原始地图=＆gt;延迟=＆gt;风格的地图。为什么会这样？不确定，可能是一些因素。

$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延迟，以这种方式创建地图也会始终第一次获得正确的样式。

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

1 个答案:

Working JSFiddle Link