Criar um mapa interativo com HTML5, CSS3, Javascript

Vou construir e desenvolver um mapa interactivo da minha escola.O mapa deve ser totalmente interativo onde deve haver evento clicável.Quando um usuário quer ver os detalhes do laboratório, deve clicar no laboratório específico region.So que eventos clicáveis, pop ups devem ser aplicados no mapa.

comecei esta tarefa com SVG/CSS e HTML5.E também tenho procurado até agora e encontrei este interessante link para presente. http://jvectormap.com/examples/mall/

Se alguém conhece um tutorial melhor ou um site para cumprir a minha tarefa, será muito grato.Se assim for, por favor partilhe algumas ligações tutoriais / url

Obrigado.
Author: Amila Iddamalgoda, 2014-01-12
Source

2 answers

Desde que eu tenho procurado neste Eu encontrei este site interessante onde você pode desenhar suas próprias imagens svg. http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

Você pode facilmente obter o código svg para o diagrama.

E facilmente podemos integrar eventos click, qualquer que seja o código java script com a imagem svg. Saúde!!

 3
Author: Amila Iddamalgoda, 2014-01-20 05:00:32

Tente FLDraw Interactive Image Creator Lite , é livre, use-o para criar um mapa interativo móvel amigável de sua escola, eu o usei para alguns dos meus projectos (não a edição Lite, porque também precisava de algumas funcionalidades avançadas)

É muito simples.
  1. inicie um novo projecto e escolha a sua imagem de mapa escolar como a sua imagem de base
  2. Use a Ferramenta de forma para criar um hotspot
  3. faça duplo-click no seu novo elemento de forma para abrir os eventos janela
  4. seleccione um tipo de Evento (tooltip, image infobox, HTML info box, ...)
    5. Salvar o projecto e publicar no HTML5

Abra o ficheiro HTML criado no seu navegador.

Exemplo de mapa interactivo da sua página inicial

 1
Author: Jeff, 2016-11-30 16:09:16