Os Marcadores Avançados usam duas classes para definir marcadores: a classe AdvancedMarkerElement
fornece os parâmetros básicos (position
, title
e map
), e a classe PinElement
contém opções para personalização adicional. O snippet a seguir mostra o código para criar um novo PinElement
e aplicá-lo a um marcador.
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
Nos mapas criados com HTML, os parâmetros básicos de um marcador são declarados usando o elemento HTML gmp-advanced-marker
. Qualquer personalização que use a classe PinElement
precisa ser aplicada de maneira programática. Para fazer isso, seu código precisa
extrair os elementos gmp-advanced-marker
da página HTML. O snippet
abaixo mostra o código para consultar uma coleção de elementos gmp-advanced-marker
e, em seguida, itere os resultados para aplicar a personalização que foi declarada no
PinElement
.
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
Esta página mostra como personalizar marcadores das seguintes maneiras:
- Adicionar o texto do título
- Ajustar a escala do marcador
- Mudar a cor do plano de fundo
- Mudar a cor da borda
- Mudar a cor do glifo
- Ocultar o glifo
![Diagrama mostrando as partes de um marcador avançado.](https://developers.google.cn/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=4&hl=pt-br)
Adicionar texto do título
O texto do título aparece ao passar o cursor sobre um marcador e pode ser lido por leitores de tela.
Para adicionar o texto do título de forma programática, use a opção
AdvancedMarkerElement.title
:
TypeScript
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.03 },
title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
JavaScript
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.03 },
title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
Para adicionar o texto do título a um marcador criado usando HTML, use o atributo title
:
<gmp-map
center="43.4142989,-124.2301242"
zoom="4"
map-id="DEMO_MAP_ID"
style="height: 400px"
>
<gmp-advanced-marker
position="37.4220656,-122.0840897"
title="Mountain View, CA"
></gmp-advanced-marker>
<gmp-advanced-marker
position="47.648994,-122.3503845"
title="Seattle, WA"
></gmp-advanced-marker>
</gmp-map>
Ajustar a escala do marcador
Para dimensionar um marcador, use a opção scale
.
TypeScript
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pinScaled.element,
});
JavaScript
// Adjust the scale.
const pinScaled = new PinElement({
scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pinScaled.element,
});
Mudar a cor do plano de fundo
Use a opção PinElement.background
para mudar a cor de fundo de um marcador:
TypeScript
// Change the background color.
const pinBackground = new PinElement({
background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.01 },
content: pinBackground.element,
});
JavaScript
// Change the background color.
const pinBackground = new PinElement({
background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.01 },
content: pinBackground.element,
});
Mudar a cor da borda
Use a opção PinElement.borderColor
para mudar a cor da borda de um marcador:
TypeScript
// Change the border color.
const pinBorder = new PinElement({
borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.03 },
content: pinBorder.element,
});
JavaScript
// Change the border color.
const pinBorder = new PinElement({
borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.03 },
content: pinBorder.element,
});
Mudar a cor do glifo
Use a opção PinElement.glyphColor
para mudar a cor do glifo de um marcador:
TypeScript
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.02 },
content: pinGlyph.element,
});
JavaScript
// Change the glyph color.
const pinGlyph = new PinElement({
glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.02 },
content: pinGlyph.element,
});
Ocultar o glifo
Defina a opção PinElement.glyph
como uma string vazia para ocultar o glifo de um marcador:
TypeScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
JavaScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
Também é possível definir PinElement.glyphColor
como o mesmo valor que PinElement.background
.
O efeito é semelhante a ocultar o glifo.
Próximas etapas:
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2024-06-29 UTC.
[]
[]