Explicações dos Ajustes:
-
Abertura do Mapa:
-
O mapa agora abre nas coordenadas e zoom especificados no primeiro exemplo.
-
-
Ícones Associados a Links:
-
Criei uma função addMarker para adicionar marcadores com ícones, cada um associado a um link que aponta para uma imagem hospedada online.
-
-
Legenda nos Ícones:
-
Cada ícone tem um popup (bindPopup) que exibe uma legenda (title) e um link (link) ao ser clicado.
-
Customizações:
-
Substitua https://example.com/icon.png pela URL do seu ícone personalizado.
-
Adapte os links e legendas na função addMarker para os locais específicos que deseja mostrar.
Alterações Feitas:
-
Remoção do Popup: A função copyToClipboard foi atualizada para copiar o texto diretamente para a área de transferência sem exibir uma mensagem de alerta.
-
Uso do navigator.clipboard: Utilize a API navigator.clipboard.writeText() para copiar o texto de forma silenciosa e mais eficiente.
Aqui está o código atualizado com os detalhes que você forneceu. Corrigi a parte do link e a função de copiar para o formato mais moderno usando navigator.clipboard.writeText. Também ajustei o código para que os marcadores usem o ícone fixo e não exibam o link na legenda do popup, apenas a informação sobre o local.
Este código agora faz o seguinte:
-
Adiciona um mapa com marcadores fixos usando o ícone fornecido.
-
Exibe as coordenadas latitude e longitude no formulário ao clicar no mapa.
-
Permite copiar as coordenadas para a área de transferência usando botões.
-
Não exibe o link na janela de popup dos marcadores para evitar confusão.
popup dos marcadores sem link para redirecionamento:
// Adicionando marcadores fixos ao mapa
locations.forEach(function(location) {
L.marker([location.lat, location.lng], { icon: fixedIcon })
.addTo(map)
.bindPopup('<b>' + location.name + '</b>');
});
Aqui está como você pode ajustar o código para posicionar a ponta do ícone:
-
Determine as dimensões do ícone: No caso da imagem que você forneceu, a dimensão do ícone é 32x32 pixels.
-
Ajuste o ponto de ancoragem:
-
iconAnchor: Define o ponto no ícone que deve estar no local do clique. Para um ícone de 32x32 pixels, a ponta do dedo está na parte inferior central, então iconAnchor deve ser configurado para [16, 32] (meia largura e altura total do ícone).
-
-
Ajuste popupAnchor se necessário: Se houver popups, você pode ajustar isso conforme o alinhamento desejado. Vamos deixá-lo em [0, -32] para que o popup apareça acima do ícone.
ESCRITO "ponto de mergulho"
este está perfeito e vou adicionar buscador abaixo
este está perfeito e vou adicionar buscador abaixo
