LeafletJS - Marcadores

Para marcar um único local no mapa, o folheto fornece marcadores. Esses marcadores usam um símbolo padrão e esses símbolos podem ser personalizados. Neste capítulo, veremos como adicionar marcadores e como personalizá-los, animá-los e removê-los.

Adicionando um Marcador Simples

Para adicionar um marcador a um mapa usando a biblioteca JavaScript Leaflet, siga as etapas abaixo -

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Instancie o Marker classe passando em um latlng objeto que representa a posição a ser marcada, conforme mostrado abaixo.

// Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);

Step 5 - Adicione o objeto marcador criado nas etapas anteriores ao mapa usando o addTo() método do Marker classe.

// Adding marker to the map
marker.addTo(map);

Exemplo

O código a seguir define o marcador na cidade chamada Hyderabad (Índia).

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671]);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

Ele gera a seguinte saída -

Vinculando Pop-ups ao Marcador

Para vincular um pop-up simples exibindo uma mensagem a um marcador, siga as etapas abaixo -

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Instancie o Marker classe passando em um latlng objeto que representa a posição a ser marcada.

Step 5 - Anexe pop-up ao marcador usando bindPopup() como mostrado abaixo.

// Adding pop-up to the marker
marker.bindPopup('Hi Welcome to Tutorialspoint').openPopup();

Step 6 - Finalmente, adicione o Marker objeto criado nas etapas anteriores para o mapa usando o addTo() método do Marker classe.

Exemplo

O código a seguir define o marcador na cidade Hyderabad (Índia) e adiciona um pop-up a ele.

<!DOCTYPE html>
<html>
   <head>
      <title>Binding pop-Ups to marker</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 15
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);         // Adding layer to the map
         var marker = L.marker([17.438139, 78.395830]);    // Creating a Marker
         
         // Adding popup to the marker
         marker.bindPopup('This is Tutorialspoint').openPopup();
         marker.addTo(map); // Adding marker to the map
      </script>
   </body>
   
</html>

Ele gera a seguinte saída

Opções de Marcador

Ao criar um marcador, você também pode passar um marker optionsvariável além do objeto latlang. Usando esta variável, você pode definir valores para várias opções do marcador, como ícone, arrastável, teclado, título, alt, zInsexOffset, opacidade, riseOnHover, riseOffset, painel, arrastável, etc.

Para criar um mapa usando as opções do mapa, você precisa seguir as etapas abaixo -

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Crie uma variável para markerOptions e especifique valores para as opções necessárias.

Criar uma markerOptions objeto (é criado como um literal) e definir valores para as opções iconUrl e iconSize.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true
}

Step 5 - Instancie o Marker classe passando em um latlng objeto que representa a posição a ser marcada e o objeto de opções, criado na etapa anterior.

// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);

Step 6 - Finalmente, adicione o Marker objeto criado nas etapas anteriores para o mapa usando o addTo() método do Marker classe.

Exemplo

O código a seguir define o marcador na cidade Hyderabad (Índia). Este marcador é clicável e arrastável com o títuloMyLocation.

<html>
   <head>
      <title>Marker Options Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
        
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating a Marker
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true
         }
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671], markerOptions);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

Ele gera a seguinte saída

Ícones personalizados de marcadores

Em vez do ícone padrão fornecido pela biblioteca de folhetos, você também pode adicionar seu próprio ícone. Você pode usar as seguintes etapas para adicionar um ícone personalizado ao mapa, em vez do padrão.

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Crie uma variável para markerOptions e especificar valores para as opções necessárias -

  • iconUrl - Como um valor para esta opção, você precisa passar um String objeto que especifica o caminho da imagem que você deseja usar como um ícone.

  • iconSize - Usando esta opção, você pode especificar o tamanho do ícone.

Note - Além desses, você também pode definir valores para outras opções, como iconSize, shadowSize, iconAnchor, shadowAnchor e popupAnchor.

Crie um ícone personalizado usando L.icon() passando a variável options acima conforme mostrado abaixo.

// Icon options
var iconOptions = {
   iconUrl: 'logo.png',
   iconSize: [50, 50]
}

// Creating a custom icon
var customIcon = L.icon(iconOptions);

Step 5- Crie uma variável para markerOptions e especifique valores para as opções necessárias. Além disso, especifique o ícone passando a variável de ícone criada na etapa anterior como um valor.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true,
   icon: customIcon
}

Step 6 - Instancie o Marker classe passando em um latlng objeto que representa a posição a ser marcada e o objeto de opções criado na etapa anterior.

// Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);

Step 7 - Finalmente, adicione o Marker objeto criado nas etapas anteriores para o mapa usando o addTo() método do Marker classe.

Exemplo

O código a seguir define o marcador na localização do Tutorialspoint. Aqui, estamos usando o logotipo do Tutorialspoint em vez do marcador padrão.

<!DOCTYPE html>
<html>
   <head>
      <title>Marker Custom Icons Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.438139, 78.395830],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

         // Adding layer to the map
         map.addLayer(layer);
         
         // Icon options
         var iconOptions = {
            iconUrl: 'logo.png',
            iconSize: [50, 50]
         }
         // Creating a custom icon
         var customIcon = L.icon(iconOptions);
         
         // Creating Marker Options
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true,
            icon: customIcon
         }
         // Creating a Marker
         var marker = L.marker([17.438139, 78.395830], markerOptions);
         
         // Adding popup to the marker
         marker.bindPopup('Hi welcome to Tutorialspoint').openPopup();
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

Ele gera a seguinte saída

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved