1

我有一個groundOverlay圖像,我希望主地圖可以打開/關閉,這樣只有疊加圖像可以顯示。那可能嗎?是否可以隱藏(切換)主地圖圖層並僅顯示地面疊加圖像本身?

PS:我正在使用javascript api v3。

+1

你正在使用哪種語言?請明確說明! –

+0

對不起,我忘了,它它的JavaScript。 – Skeletor

+0

我不擅長JavaScript,我知道你可以在android中做,並檢查JS api,它似乎不可能或容易,只需選中:https://developers.google.com/maps/documentation/javascript/參考#MapTypeId 和更多擴展說明:https://developers.google.com/maps/documentation/javascript/maptypes –

回答

1

您可以實現自定義地圖類型(不使磚),那麼你只需要在這個自定義地圖類型和一個內置的地圖類型(如ROADMAP)之間切換:

function initialize() { 
 
    var goo = google.maps, 
 
    map = new goo.Map(document.getElementById('map-canvas'), { 
 
     zoom: 11, 
 
     center: new goo.LatLng(40.740, -74.18), 
 
     mapTypeControl: false 
 

 
    }), 
 

 
    mt = function() { 
 
     this.getTile = function() { 
 
     var n = document.createElement('div'); 
 
     n.style.cssText = 'background:#fff;width:256px;height:256px;'; 
 
     return n; 
 
     }; 
 
     this.tileSize = new google.maps.Size(256, 256); 
 
     this.maxZoom = 20; 
 
    }, 
 
    //maptype-control 
 
    mtc = document.createElement('div'); 
 

 
    mtc.id = 'mtc'; 
 
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(mtc); 
 

 
    google.maps.event.addDomListener(mtc, 'click', function() { 
 
    console.log(map.getMapTypeId()) 
 
    map.setMapTypeId((map.getMapTypeId() === 'hidden') ? google.maps.MapTypeId.ROADMAP : 'hidden'); 
 
    }); 
 
    google.maps.event.addListener(map, 'maptypeid_changed', function() { 
 
    mtc.style.textDecoration = ((this.getMapTypeId() === 'hidden') ? 'none' : 'line-through'); 
 
    }); 
 

 
    map.mapTypes.set('hidden', new mt); 
 
    map.setMapTypeId('hidden'); 
 

 
    new goo.GroundOverlay(
 
    'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', 
 
    new goo.LatLngBounds(
 
     new goo.LatLng(40.712216, -74.22655), 
 
     new goo.LatLng(40.773941, -74.12544) 
 
    ), { 
 
     map: map 
 
    } 
 
); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#mtc { 
 
    border: 1px solid #000; 
 
    background: tomato; 
 
    padding: 2px; 
 
    margin: 4px; 
 
    cursor: pointer; 
 
    font-size: 1.4em; 
 
    font-weight: bold; 
 
    border-radius:2px; 
 
} 
 
#mtc:after { 
 
    content: 'Tiles'; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<div id="map-canvas"></div>

相關問題