Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 é bem simples:
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) - (Nao 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:
#
#
CREATE TABLE `tb_bairro` (
`id` tinyint(3) NOT NULL auto_increment,
`bairro` varchar(60) default '',
`coord` varchar(80) default '',
PRIMARY KEY (`id`)
) TYPE=InnoDB;
#
#
INSERT INTO `tb_bairro` VALUES (1,'ST CENTRAL','');
INSERT INTO `tb_bairro` VALUES (2,'JD AMERICA','[http://wikimapia.org](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,'PQ AMAZONIA','');
#
#
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;
#
#
INSERT INTO `tb_lotes` VALUES (1,'19','510',2,'RUA C-210','[http://wikimapia.org](http://wikimapia.org)/#lat=-16.7042163&lon=-49.2837265&z=19&l=9&m=b','[http://wikimapia.org](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](http://wikimapia.org)/#lat=-16.7042163&lon=-49.2837265&z=19&l=9&m=b','[http://wikimapia.org](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](http://wikimapia.org)/#lat=-16.7089047&lon=-49.2930767&z=19&l=9&m=b','[http://wikimapia.org](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](http://wikimapia.org)/#lat=-16.7089047&lon=-49.2930767&z=19&l=9&m=b','[http://wikimapia.org](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](http://wikimapia.org)/#lat=-16.6928455&lon=-49.2949113&z=19&l=9&m=b','[http://wikimapia.org](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](http://wikimapia.org)/#lat=-16.694202&lon=-49.2938063&z=19&l=9&m=b','[http://wikimapia.org](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](http://wikimapia.org)/#lat=-16.7322217&lon=-49.2777559&z=19&l=9&m=b','[http://wikimapia.org](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">](http://www.w3.org/1999/xhtml)
<head>
<title>Systema Imobiliário</title>
<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 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 -->
<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 -->
<script type="text/javascript">
$(document).ready(function(){
$('#quadra').change(function(){
$('#lote').load('lotes.php?quadra='+$('#quadra').val() + "&" + 'bairro='+$('#bairro').val());
});
});
</script>
<!-- Funcoes do botao -->
<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>
* <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 '<script type="text/javascript">alert(strBai);</script>';*
* mysql_connect('localhost','root','********');*
mysql_selectdb('investimovel');
$result = mysql_query("SELECT FROM tb_lotes");*
$row = mysql_fetch_array($result);
If (!$result) {
echo "<script> alert('Erro de Informação');</script>";
}
Else {
$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.....: <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 -->
* <a href="<? echo $lateral ?>" target="iframe1">*
* </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 "<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 "<script> alert('$strCoord19');</script>";
echo "<option value='".$row['id']."'>".$row['lote']."</option>";
}
?>
------------------------------------------------------------------------------------------
Nao consigo Atualizar o Iframe quando se clica o select bairro, quadra e nem o botao Localizar.
E também 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
Carregando comentários...