2017-01-06 42 views
0

我已经实现谷歌地图,并把默认视图作为卫星。但是当页面加载时,在显示地图之前,背景显示为蓝色。它的工作很好,当把地图视图默认。我已在地图选项中使用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' 
    }); 

有人能帮助我吗?

enter image description here

+1

我不认为它的蓝色背景,它是海。您的应用程序可能会首先发送不同的经度和纬度,然后是实际的。 – Prajwal

+0

@Prajwal,谢谢你的回复。我在地图选项中检查了中央经纬度。例如(30.704649,76.717873)这个经纬度放在“center:new google.maps.LatLng(30.704649,76.717873)”中。但得到同样的问题。 – vivekinv8

+0

请提供证明问题的[mcve]。 [我没有看到任何像你的图片,如果我把张贴的代码放在小提琴中](http://jsfiddle.net/geocodezip/LnL4ggop/)(但也许你的电脑或网络连接比我的慢)。 – geocodezip

回答

0

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

$.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);