Can the Google Maps API base map be used as an overlay above a custom map layer?

前端 未结 1 1202
你的背包
你的背包 2020-12-29 11:53

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

I would like to create a map that uses Go

相关标签:
1条回答
  • 2020-12-29 12:37

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

    0 讨论(0)
提交回复
热议问题