Baixe MMAP como PDF Grátis

Olá pessoal, bem-vindos de volta! No último vídeo, adicionamos algumas funcionalidades legais ao Leaflet, como a escala na visualização do mapa em tela cheia e também a função de exibição de coordenadas do mapa. Neste vídeo, vou adicionar mais uma função chamada funcionalidade de impressão do mapa. Para isso, quero apenas adicionar um botão aqui. O nome do botão pode ser "botão com classe" talvez "imprimir mapa" e então vou adicionar o texto "imprimir mapa". Ok, agora você pode ver o botão de imprimir mapa, mas ele não faz nada. Então, vamos adicionar esse recurso aqui. Para isso, talvez quando eu clicar, na verdade, em jQuery, podemos selecionar o elemento usando o nome da classe com a função de ponto, talvez "imprimir mapa". Sim, aqui selecionamos este botão e então "imprimir mapa.click" podemos encontrar essa função de clique e o que ela deve fazer é que, quando clicarmos no botão de imprimir mapa, ela deve chamar "window.print". Ok, isso significa que é a função padrão do JavaScript, então podemos apenas imprimir nosso mapa quando clicarmos na função de imprimir mapa. Vamos tentar. Sim, agora está funcionando, agora podemos imprimir um mapa, mas devido ao tamanho do mapa na nossa tela, ele não é responsivo. Isso significa que aparece na segunda página e vimos tudo dentro do mapa e também o mapa não é responsivo, ele cortou as bordas, então não é um bom comportamento, mas implementamos de alguma forma. Para essa funcionalidade de impressão, na verdade, temos um plugin legal chamado "leaflet-browser-print", então talvez tenhamos que usar isso aqui. Sim, vou usar esse plugin. Para isso, vou apenas baixar o código usando o git ou você pode apenas baixar o zip daqui, isso também está bom. Então, vou voltar para a pasta de downloads e sim, agora está baixado. Se eu for para o diretório do "leaflet-browser-print", isso significa que já baixei este arquivo, então precisamos ler alguma documentação sobre como implementar este plugin. Para isso, precisamos adicionar o "browserprint.min.js" no nosso código. Vou copiá-lo manualmente daqui. Ok, dentro disso temos essa função principal e vou apenas copiar este arquivo e colá-lo na pasta. Desculpe, na verdade, vou criar um diretório chamado "leave" e colá-lo aqui. Agora posso importar esta biblioteca. Então, após o jQuery, vou importar este script src e então "./leave" e depois "browserprint.min.js", algo assim. Após importar isso, o que precisamos fazer é passar essa função, então aqui "control.browser.print" para o mapa. Ok, vamos fazer isso aqui. Ok, imprimir mapa. Sim, talvez eu apenas copie isso e cole aqui. Ok, agora ele adicionará automaticamente nosso ícone de impressão e então podemos apenas imprimir nosso mapa. Se houver várias opções, podemos apenas selecionar o tamanho do papel, se é retrato ou paisagem ou um personalizado, talvez eu tente automático primeiro. Sim, não está respondendo bem, importado. Sim, importado, ficou bom. Então, sim...