Question

我已经实施了谷歌地图并将默认视图设置为卫星。但是当页面加载时，背景在显示地图之前显示为蓝色。放置地图视图时默认工作正常。我已在地图选项中使用backgroundColor: 'none'进行了检查。但它不起作用。

我使用的代码如下：

 map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(center_lat,center_long),
        zoom: 18,           
        mapTypeControl: true,
        mapTypeControlOptions:
        {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID],
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT             
        },          
        mapTypeId: google.maps.MapTypeId.HYBRID,
        navigationControl: true,
        navigationControlOptions:
        {
            style: google.maps.NavigationControlStyle.SMALL
        },
        backgroundColor: 'none'
    });

有人能帮助我吗？

Answer 1

我在获取位置详细信息之前定义了地图变量。我找到了解决这个问题的方法。在调用url之后定义map变量以获取位置详细信息。例如：

    $.getJSON('googlescript.php', function(items)
    {
        var center_lat = '30.704649';
        var center_long = '76.717873';

        map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(center_lat,center_long),
            zoom: 18,           
            mapTypeControl: true,
            mapTypeControlOptions:
            {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID],
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.TOP_RIGHT             
            },          
            mapTypeId: google.maps.MapTypeId.HYBRID,
            navigationControl: true,
            navigationControlOptions:
            {
                style: google.maps.NavigationControlStyle.SMALL
            },
            backgroundColor: 'gray'
        });

        var routePoints = [];
        for (var i = 0; i < items.length; i++) {                    
          (function(item) {                     
                addMarker(item.lat,item.long);
            })(items[i]);
            routePoints.push(new     google.maps.LatLng(items[i].lat,items[i].long));
            var route= new google.maps.Polyline({
                        path: routePoints,
                        strokeColor: "#FF0000",
                        strokeOpacity: .9,
                        strokeWeight: 3,
                        geodesic: true,
                        icons: [{
                            icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
                            offset: '0',
                            repeat: '100px'
                        }
                        ]
            });
        map.setCenter(new google.maps.LatLng(center_lat,center_long));
        map.setZoom(18); 
        route.setMap(map);
        map.setTilt(0);         
        }

    });
    center = bounds.getCenter();
    map.fitBounds(bounds);

当谷歌地图卫星视图加载

1 个答案: