Может ли базовая карта API Карт Google использоваться в качестве наложения над пользовательским слоем карты?

Question

Возможно ли использовать данные базовой карты Google Maps API в качестве наложения, расположенного выше пользовательского слоя карты?

Я хотел бы создать карту, которая использует базовую воду Google и землю/ландшафт в качестве нижнего слоя, а затем поместить над ними пользовательский слой данных (красные многоугольные области, представляющие мои данные), а затем, наконец, позиционировать улицу Google Map/border/city labels поверх всего.

Возможно ли это? Я попытался нажать слой Google Maps (с включенными только улицами/границами/городами) в массив overlayMapTypes, но он, похоже, заставляет все слои Google Maps превышать все, а мои данные пользовательского уровня (второй слой) больше не видно.

Answer 1

Вот пример с пользовательского слоя тайлов в качестве среднего слоя:

<script type="text/javascript"> 
function initMap() { 
    // Map with everything off but boundaries 
    var myOptions = { 
     zoom: 2, 
     center: new google.maps.LatLng(0, 0), 
     styles: [ 
      { 
       featureType: 'poi', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      }, 
      { 
       featureType: 'road', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      }, 
      { 
       featureType: 'transit', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      }, 
      { 
       featureType: 'landscape', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      }, 
      { 
       elementType: 'labels', 
       stylers: [ 
        { visibility: 'off' } 
       ] 
      } 
     ] 
    }; 

    var map = new google.maps.Map(document.getElementById("map"), myOptions); 

    // Middle layer 
    var tileLayer = new google.maps.ImageMapType({ 
     getTileUrl: "tiles URL here", 
     tileSize: new google.maps.Size(256, 256), 
     isPng: true 
    }); 

    map.overlayMapTypes.push(tileLayer); 

    // Top layer with everything off but roads 
    var roadsLayer = [ 
     { 
      featureType: 'all', 
      stylers: [ 
       { visibility: 'off' } 
      ] 
     }, 
     { 
      featureType: 'road', 
      stylers: [ 
       { visibility: 'on' } 
      ] 
     } 
    ]; 

    var roadsType = new google.maps.StyledMapType(roadsLayer, { name: 'roads' }); 
    map.overlayMapTypes.push(roadsType); 
}