角度のGoogleマップでは、カスタムタイルのみを表示するにはどうすればよいですか？

Question

カスタムタイルを表示することはできますが、ブラウザはGoogleの標準のマップタイルをその下にロードしています。これにより、パフォーマンスが低下し、ユーザーが縁をパンするとマップが奇妙に見えます。任意のアイデアはどのように正常な地図のレイヤーを防ぐには？最後に

Demo

Answer 1

、私は親ui-gmap-google-mapを保持していても、ui-gmap-map-typeディレクティブを避けて巻き取りました。代わりに、google.maps & $scope.map.controlオブジェクトがロードされるのを待ってから、mapTypes.set()メソッドを使用して、独自のイメージタイルのセットをポイントしました。

index.htmlを

<ui-gmap-google-map control='map.control'> 
    <!-- marker & polygon directives --> 
</ui-gmap-google-map> 

controller.js

$scope.map = { 
    control: {} 
}; 

uiGmapGoogleMapApi.then(function(maps) { 
    var moonMapType = new maps.ImageMapType({ 
     getTileUrl: function(coord, zoom) { 
      var normalizedCoord = getNormalizedCoord(coord, zoom); 
      if (!normalizedCoord) { 
      return null; 
      } 
      var bound = Math.pow(2, zoom); 
      return 'http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' + 
       '/' + zoom + '/' + normalizedCoord.x + '/' + 
       (bound - normalizedCoord.y - 1) + '.jpg'; 
     }, 
     tileSize: new maps.Size(256, 256), 
     maxZoom: 9, 
     minZoom: 0, 
     radius: 1738000, 
     name: 'Moon' 
    }); 

    $scope.$watch("map.control", function(mapControl, emptyObj) { 
     mapControl.mapTypes.set('moon', moonMapType); 
     mapControl.setMapTypeId('moon'); 
    }); 
    } 

    // Normalizes the coords that tiles repeat across the x axis (horizontally) 
    // like the standard Google map tiles. 
    function getNormalizedCoord(coord, zoom) { 
    var y = coord.y; 
    var x = coord.x; 

    // tile range in one direction range is dependent on zoom level 
    // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc 
    var tileRange = 1 << zoom; 

    // don't repeat across y-axis (vertically) 
    if (y < 0 || y >= tileRange) { 
     return null; 
    } 

    // repeat across x-axis 
    if (x < 0 || x >= tileRange) { 
     x = (x % tileRange + tileRange) % tileRange; 
    } 

    return {x: x, y: y}; 
    } 
});