{"id":8000,"date":"2019-02-27T07:30:19","date_gmt":"2019-02-27T10:30:19","guid":{"rendered":"http:\/\/www.fernandoquadro.com.br\/html\/?p=8000"},"modified":"2020-08-04T18:49:13","modified_gmt":"2020-08-04T21:49:13","slug":"introducao-ao-leaflet-adicionando-marcador-parte-2","status":"publish","type":"post","link":"https:\/\/www.fernandoquadro.com.br\/html\/2019\/02\/27\/introducao-ao-leaflet-adicionando-marcador-parte-2\/","title":{"rendered":"Introdu\u00e7\u00e3o ao Leaflet \u2013 Adicionando Marcador"},"content":{"rendered":"

Estou come\u00e7ando devagar, ent\u00e3o hoje vamos adicionar um marcador com alguns recursos extras. J\u00e1 que o mapa de ontem<\/a> j\u00e1 est\u00e1 centralizado no Desastre de Brumadinho, vamos adicionar um marcador l\u00e1.<\/p>\n

1. Adicionando um Marcador<\/strong><\/p>\n

Para criar um marcador, o Leaflet usa a classe L.marker<\/em>:<\/p>\n

\r\nvar earthquakeMarker = L.marker([-20.1438, -44.1301]);\r\n<\/pre>\n
Isso cria o marcador, por\u00e9m precisa ser adicionado ao mapa:<\/p>\n
\r\nearthquakeMarker.addTo(map);\r\n<\/pre>\n
E o nosso mapa fica assim:<\/p>\n
\"\"<\/center><\/p>\n
Bom at\u00e9 agora, mas olhando para o mapa n\u00e3o nos diz nada sobre o marcador. Vamos mudar isso adicionando um t\u00edtulo:<\/p>\n
\r\nvar earthquakeMarker = L.marker([-20.1438, -44.1301], \r\n    {title: 'Janeiro 25, 2019 Desastre de Brumadinho'});\r\n<\/pre>\n
Agora, quando passamos o marcador, recebemos um t\u00edtulo:<\/p>\n
\"\"<\/center><\/p>\n
Agora, vamos adicionar um pop-up ao marcador para exibir mais informa\u00e7\u00f5es no evento do click. Fazemos isso vinculando um pop-up ao nosso marcador existente:<\/p>\n
\r\nvar earthquakeMarker = L.marker([-20.1438, -44.1301], \r\n    {title: 'Janeiro 25, 2019 Desastre de Brumadinho'});\r\nearthquakeMarker.bindPopup(\"Janeiro 25, 2019
Desastre de Brumadinho\");\r\nearthquakeMarker.addTo(map);\t\r\n\r\n<\/pre>\n
Quando clicamos no marcador, o pop-up \u00e9 exibido.<\/p>\n
\"\"<\/center><\/p>\n
Se voc\u00ea quiser, pode ver o processo detalhado acima no YouTube:<\/p>\n

\n