Sistema de localização de imóvel pelo Mapa

[Hernani Garcia]

Sistema de localização de imóvel pelo Mapa

Ola Tudo bem,

Estou tentando a alguns dias criar este sistema de visualização de imóvel pelo mapa.

Este sistema faz o seguinte:

Mostra a localização do imóvel no mapa.

O projeto inteiro é este abaixo, é bem simples mas funcional:

Tem 3 Select Bairro, Quadra e Setor

Um botão Localizar

Um Iframe com mapa do Wikimapia (http://wikimapia.org)

---------------------------------------------------------

Ao abrir o site os nomes dos bairros são armazenados no select Bairro e é aberto em no Iframe o mapa de Goiania

Ao selecionar o Bairro o select quadra é preenchido com as quadras deste bairro e no iframe deveria aparecer um zoom com o bairro. (Esta coordenada se encontra na tabela tb_bairro campo coord) - (não estou conseguindo este zoom)

Ao selecionar a Quadra o select Lote é preenchido com os lotes que estão nesta quadra e no bairro selecionado,

O Iframe deveria ser atualizado com as coordenadas da quadra que se encontra na tabela tb_lotes, campo coord19

Também não estou conseguindo este Zoom

Ao clicar o botao Localizar abre uma janela com as informações do lote tb_Lotes (Logradouro, area, frente, lateral)

O iframe deveria ser atualizado com as coordenadas do lote que se encontra tb_lotes, campo coord20

Também não estou conseguindo este Zoom

---------------------------------------------------------------

A base de dados tem apenas 2 tabelas: tb_bairro e tb_lotes:

# MySQL-Front 3.2 (Build 14.8)

# Host: localhost Database: investimovel

# ------------------------------------------------------

# Server version 4.0.14-nt

#

# Table structure for table tb_bairro

#

CREATE TABLE `tb_bairro` (

`id` tinyint(3) NOT NULL auto_increment,

`bairro` varchar(60) default '',

`coord` varchar(80) default '',

PRIMARY KEY (`id`)

) TYPE=InnoDB;

#

# Dumping data for table tb_bairro

#

INSERT INTO `tb_bairro` VALUES (1,'ST CENTRAL','');

INSERT INTO `tb_bairro` VALUES (2,'JD AMERICA','http://wikimapia.org/#lat=-16.7112604&lon=-49.2845821&z=14&l=9&m=b');

INSERT INTO `tb_bairro` VALUES (3,'ST SUDOESTE','');

INSERT INTO `tb_bairro` VALUES (4,'porque AMAZONIA','');

#

# Table structure for table tb_lotes

#

CREATE TABLE `tb_lotes` (

`id` int(4) NOT NULL default '0',

`lote` varchar(10) default '',

`quadra` varchar(10) default '',

`idbairro` tinyint(3) default '0',

`logradouro` varchar(30) default '',

`coord19` varchar(80) default '',

`coord20` varchar(80) default '',

`area` smallint(1) default '0',

`frente` varchar(7) default '0',

`lateral` varchar(7) default '',

PRIMARY KEY (`id`)

) TYPE=InnoDB;

#

# Dumping data for table tb_lotes

#

INSERT INTO `tb_lotes` VALUES (1,'19','510',2,'RUA C-210','http://wikimapia.org/#lat=-16.7042163&lon=-49.2837265&z=19&l=9&m=b','http://wikimapia.org/#lat=-16.7040442&lon=-49.2839196&z=20&l=9&m=b',520,'30','25');

INSERT INTO `tb_lotes` VALUES (2,'20','510',2,'RUA C-211','http://wikimapia.org/#lat=-16.7042163&lon=-49.2837265&z=19&l=9&m=b','http://wikimapia.org/#lat=-16.7046466&lon=-49.283461&z=20&l=9&m=b',600,'25','15');

INSERT INTO `tb_lotes` VALUES (3,'09','524',2,'RUA C-119','http://wikimapia.org/#lat=-16.7089047&lon=-49.2930767&z=19&l=9&m=b','http://wikimapia.org/#lat=-16.7093376&lon=-49.2931478&z=20&l=9&m=b',320,'33','10');

INSERT INTO `tb_lotes` VALUES (4,'21','524',2,'RUA C-160','http://wikimapia.org/#lat=-16.7089047&lon=-49.2930767&z=19&l=9&m=b','http://wikimapia.org/#lat=-16.7091526&lon=-49.2928272&z=20&l=9&m=b',340,'30','28');

INSERT INTO `tb_lotes` VALUES (5,'16','65',3,'RUA C-054','http://wikimapia.org/#lat=-16.6928455&lon=-49.2949113&z=19&l=9&m=b','http://wikimapia.org/#lat=-16.6927247&lon=-49.2951339&z=20&l=9&m=b',480,'30','20');

INSERT INTO `tb_lotes` VALUES (6,'23','61',3,'RUA C-053','http://wikimapia.org/#lat=-16.694202&lon=-49.2938063&z=19&l=9&m=b','http://wikimapia.org/#lat=-16.6943972&lon=-49.2939444&z=20&l=9&m=b',300,'25','30');

INSERT INTO `tb_lotes` VALUES (7,'50','117',4,'RUA IGAPO','http://wikimapia.org/#lat=-16.7322217&lon=-49.2777559&z=19&l=9&m=b','http://wikimapia.org/#lat=-16.7320817&lon=-49.2775306&z=20&l=9&m=b',320,'30','15');

-----------------------------------------------------------------------------------------------------------------

O script do sistema:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Systema Imobiliário</title>

&lt;script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<!-- script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script-->

&lt;script type="text/javascript">

$(document).ready(function() {

$('a[name=modal]').click(function(e) {

e.preventDefault();

var id = $(this).attr('href');

var maskHeight = $(document).height();

var maskWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.6);

//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();

$(id).css('top', 15);

$(id).css('left', 15);

$(id).fadeIn(2000);

});

$('.window .close').click(function (e) {

e.preventDefault();

$('#mask').hide();

$('.window').hide();

});

$('#mask').click(function () {

$(this).hide();

$('.window').hide();

});

});

</script>

<style type=text/css">

body {

font-family:verdana;

font-size:15px;

}

a {color:#333; text-decoration:none}

a:hover {color:#ccc; text-decoration:none}

#mask {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}

#boxes .window {

position:absolute;

left:0;

top:0;

width:250px;

height:250px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #dialog {

width:250px;

height:250px;

padding:10px;

background-color:#ffffff;

}

.close{display:block; text-align:right;}

</style>

<!-- Seleciona o Bairro -->

&lt;script type="text/javascript">

$(document).ready(function(){

$('#bairro').change(function(){

//alert('Zoom do mapa do bairro');

$('#quadra').load('quadras.php?bairro='+$('#bairro').val() );

});

});

</script>

<!-- Seleciona a Quadra -->

&lt;script type="text/javascript">

$(document).ready(function(){

$('#quadra').change(function(){

//alert('Zoom do mapa da quadra');

$('#lote').load('lotes.php?quadra='+$('#quadra').val() + "&" + 'bairro='+$('#bairro').val());

});

});

</script>

<!-- Funcoes do botao -->

&lt;script type="text/javascript">

function FP_swapImg() {//v1.0

var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;

n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;

elm.$src=elm.src; elm.src=args[n+1]; } }

}

function FP_preloadImgs() {//v1.0

var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();

for(var i=0; i<a.length; i++) { d.FP_imgs=new Image; d.FP_imgs.src=a; }

}

function FP_getObjectByID(id,o) {//v1.0

var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);

else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;

if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if©

for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }

f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;

for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }

return null;

}

</script>

&lt;script type="text/javascript">

var div = "dialog";

// atribuir o nome da div que quer mostrar e ocultar

function AparecerDiv(){ // função aparecer

var strBai = $('#bairro').val();

var strQd = $('#quadra').val();

var strLt = $('#lote').val();

//alert (strQd );

<?php

//echo '&lt;script type="text/javascript">alert(strBai);</script>';

mysql_connect('localhost','root','********');

mysql_selectdb('investimovel');

$result = mysql_query("SELECT * FROM tb_lotes Where bairro = '$bairro' and quadra = '$quadra' and lote = '$lote'");

$row = mysql_fetch_array($result);

If (!$result) {

echo "&lt;script> alert('Erro de Informação');</script>";

}

Else {

//Estas variáveis vao para a div id="dialog"

$lograd = $row['logradouro];

$quadra = $row['quadra'];

$lote = $row['lote'];

$area = $row['area'];

$frente = $row['frente'];

$lateral = $row['lateral'];

$coord20 = $row['coord20'];

}

?>

document.getElementById(div).style.display = "block";

}

</script>

</head>

<body onload=FP_preloadImgs(/*url*/'button8.jpg', /*url*/'button7.jpg', /*url*/'button9.jpg', /*url*/'button10.jpg')" bgcolor="#000000">

<table border="1" width="100%" id="table1"><tr><td bgcolor="#C0C0C0">

<select name="bairro" id="bairro" style="background-color: #FFFFCC" size="1">

<option value="0" selected>Selecione o Bairro</option>

<?php

mysql_connect('localhost','root','********');

mysql_selectdb('investimovel');

$result = mysql_query("select * from tb_bairro");

while($row = mysql_fetch_array($result) ){

echo "<option value='".$row['id]."'>".$row['bairro']."</option>";

}

?>

</select>

<select name=quadra" id="quadra" style="background-color: #FFFFCC">

<option value="0">Selecione o Bairro</option>

</select>

<select name="lote" id="lote" style="background-color: #FFFFCC">

<option value="0">Selecione a quadra</option>

</select>

 

<!-- a href="http://google.com" target="iframe1"-->

<!-- a href="http://wikimapia.org/#lat=-16.7007815&lon=-49.2926931&z=20&l=9&m=b" target="iframe1"-->

<img border="0" id="img2" src="button11.jpg" Top="200" height="20" width="100" alt="Localizar" fp-style="fp-btn: Embossed Rectangle 1" fp-title="Localizar" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button9.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button11.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button10.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button9.jpg')" onclick="AparecerDiv()"></a>

<!-- img border="0" id="img2" src="button11.jpg" Top="200" height="20" width="100" alt="Localizar" onclick="AparecerDiv()"></a-->

</tr></td>

</table>

<iframe name="iframe1" src="http://wikimapia.org/#lat=-16.696545&lon=-49.261837&z=13&l=9&m=b" width="100%" height="575"></iframe>

<!-- Dados do Lote -->

<div id="boxes">

<div id="dialog" class="window" style="background-color: #000000">

<table border="1" width="100%" id="table1"><tr>

<td bgcolor="#CCCCCC" bordercolorlight="#800000" bordercolordark="#800000">

<a href="#" class="close"><b><font color="#FF0000">Fechar [X]</font> </b></a><br />

   DADOS DESTE IMOVEL<br/><br/>

<!-- Busca na Base de Dados -->

teste.: <? echo $n ?> <br/> <br/>

Bairro.....: &lt;script> document.getElementById('bairro'); </script> <br/>

Endereço: <? echo $lograd ?> <br/>

Quadra...: <? echo $quadra ?> <br/>

Lote.......: <? echo $lote ?> <br/><br/>

Area.....: <? echo $area ?> m² <br/>

Frente..: <? echo $frente ?> <br/>

Lateral..: <? echo $lateral ?> <br/>

<br/>

</table></tr></td>

<!-- Atualiza Iframe -->

<!-- Zoom do mapa do lote aqui-->

</div>

</div>

</body>

</html>

----------------------------------------------------------------------------------

quadras.php

<?php

$idBairro = $_GET['bairro];

mysql_connect('localhost','root','**********');

mysql_selectdb('investimovel');

$result = mysql_query("SELECT * FROM tb_lotes WHERE idbairro = '$idBairro' order by quadra");

$qd = '999';

while($row = mysql_fetch_array($result))

{

if ($qd != $row['quadra']) {

echo "<option value=".$row['quadra]."'>".$row['quadra']."</option>";

$qd = $row['quadra'];

}

}

?>

----------------------------------------------------------------------------------

lotes.php

<?php

$idQuadra = $_GET['quadra'];

$idBairro= $_GET['bairro'];

//echo "&lt;script>alert($idBairro);</script>";

mysql_connect('localhost','root','**********');

mysql_selectdb('investimovel');

$result = mysql_query("SELECT * FROM tb_lotes WHERE idbairro = '$idBairro' and quadra like ".$idQuadra);

while($row = mysql_fetch_array($result))

{

$strCoord19 = $row['coord19'];

echo "&lt;script> alert('$strCoord19');</script>";

echo "<option value=".$row['id]."'>".$row['lote']."</option>";

}

?>

------------------------------------------------------------------------------------------

não consigo Atualizar o Iframe com as novas coordenadas quando se clica o select bairro, quadra e o botao Localizar.

E não consigo colocar os dados do lote dentro da janela (Div) ao clicar o botao localizar.

Não sei onde esta o erro.

Quem puder me ajudar, agradeço.

Abraços

Hernani