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

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

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

enter image description here

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

Ответы

Ответ 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);
}