Google Maps API底图能否用作自定义地图图层上方的叠加层？ [英] Can the Google Maps API base map be used as an overlay above a custom map layer?

问题描述

是否可以将Google Maps API底图数据用作位于自定义地图图层上方的覆盖图？

Is it possible to use the Google Maps API base map data as an overlay positioned above a custom map layer?

我想创建一个使用Google的基础水域和地形/地形作为底层的地图，然后在上方定义一个自定义数据层（代表我的数据的红色多边形区域），然后最终将Google Map的街道/边界/城市标签放在顶部

I would like to create a map that uses Google's base water and land/terrain as the bottom layer, and then position a custom data layer above that (red polygonal regions representing my data), and then finally position Google Map's street/boundary/city labels on top of everything.

这可能吗？我尝试将Google Maps图层（仅限街道/边界/城市打开）推到overlayMapTypes数组上，但它似乎强制所有Google地图图层位于顶部，而我的自定义图层数据（第二图层）为不再可见。

Is this possible? I tried pushing a Google Maps layer (with only streets/boundaries/cities turned on) onto the overlayMapTypes array, but it seems to force all of the Google Maps layers on top of everything, and my custom layer data (the second layer) is no longer visible.

推荐答案

以下是自定义切片图层作为中间图层的示例：

Here is an example with a custom tile layer as the middle layer:

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

这篇关于Google Maps API底图能否用作自定义地图图层上方的叠加层？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！