Introdução
As sobreposições são objetos no mapa vinculados a coordenadas de latitude/longitude. Portanto, eles se movem quando você arrasta ou aplica zoom no mapa. Para inserir uma imagem em um mapa, use um objeto GroundOverlay
.
Para informações sobre outros tipos de sobreposição, consulte Desenhar no mapa.
Adicionar uma sobreposição de solo
O construtor de um GroundOverlay
especifica o URL de uma imagem e o LatLngBounds
da imagem como parâmetros. A imagem é renderizada no mapa, restrita aos limites informados e adaptada usando a projeção do mapa.
TypeScript
// This example uses a GroundOverlay to place an image on the map // showing an antique map of Newark, NJ. let historicalOverlay; function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 13, center: { lat: 40.74, lng: -74.18 }, } ); const imageBounds = { north: 40.773941, south: 40.712216, east: -74.12544, west: -74.22655, }; historicalOverlay = new google.maps.GroundOverlay( "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg", imageBounds ); historicalOverlay.setMap(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example uses a GroundOverlay to place an image on the map // showing an antique map of Newark, NJ. let historicalOverlay; function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 13, center: { lat: 40.74, lng: -74.18 }, }); const imageBounds = { north: 40.773941, south: 40.712216, east: -74.12544, west: -74.22655, }; historicalOverlay = new google.maps.GroundOverlay( "https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg", imageBounds, ); historicalOverlay.setMap(map); } window.initMap = initMap;
Testar amostra
Remover uma sobreposição de solo
Para remover uma superposição de um mapa, chame o método setMap()
da superposição, passando null
. A chamada desse método não elimina a sobreposição. Ela só remove a sobreposição do mapa. Se, em vez disso, você quiser excluir a superposição, vai precisar remover essa opção do mapa e definir a própria superposição como null
.
function removeOverlay() { historicalOverlay.setMap(null); }