Jump to content


Hernani Garcia

Member Since 12/05/2011
Offline Last Active 13/05/2011, 18:45
-----

Topics I've Started

Sistema De Localização De Imóvel Pelo Mapa

13/05/2011, 14:03

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 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:

# 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...21&z=14&l=9&m=b');
INSERT INTO `tb_bairro` VALUES (3,'ST SUDOESTE','');
INSERT INTO `tb_bairro` VALUES (4,'PQ 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...9&m=b,520,30,25');
INSERT INTO `tb_lotes` VALUES (2,'20','510',2,'RUA C-211','http://wikimapia.org...9&m=b,600,25,15');
INSERT INTO `tb_lotes` VALUES (3,'09','524',2,'RUA C-119','http://wikimapia.org...9&m=b,320,33,10');
INSERT INTO `tb_lotes` VALUES (4,'21','524',2,'RUA C-160','http://wikimapia.org...9&m=b,340,30,28');
INSERT INTO `tb_lotes` VALUES (5,'16','65',3,'RUA C-054','http://wikimapia.org...9&m=b,480,30,20');
INSERT INTO `tb_lotes` VALUES (6,'23','61',3,'RUA C-053','http://wikimapia.org...9&m=b,300,25,30');
INSERT INTO `tb_lotes` VALUES (7,'50','117',4,'RUA IGAPO','http://wikimapia.org...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...l1-strict.dtd">

<html xmlns="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.googleap....js"></script-->
<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(){
//alert('Zoom do mapa da quadra');
$('#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[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

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 Where bairro = '$bairro' and quadra = '$quadra' and lote = '$lote'");
$row = mysql_fetch_array($result);

If (!$result) {
echo "<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>

&nbsp;
<!-- a href="http://google.com" target="iframe1"-->
<!-- a href="http://wikimapia.org...1&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...7&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 />
&nbsp;&nbsp; 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 -->
<!-- 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 "<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 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

Transporte Variavel Javascript Para Php

13/05/2011, 10:30

Minha dúvida:

<script type="text/javascript">
function MostraValor(){ // função para realizar testes
var strBairro = 'Jd America';

<?php
$x = "<script>document.write(strBairro)</script>";
echo "<script>alert($x)</script>";
?>
}
</script>


<!-- Botão pra chamar funcão MostraValor -->
<img border="0" id="img3" src="button2.jpg" top="150" height="20" width="100" alt="Teste" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button3.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button2.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button4.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button3.jpg')" fp-style="fp-btn: Corporate 1" fp-title="Teste" onclick="MostraValor()"></td>


------------------------------------------------
Um botão chamado Teste que ao ser clicado irá chamar a função MostraValor
a variavel JScript strBairro recebe o valor 'Jd America'

Transportar este valor para o PHP para dentro da variável $x

$x deveria ter em seu conteúdo o valor 'Jd America', más nao tem

Se tivesse mostraria em uma mensagem de Alerta

Não consigo fazer isto funcionar.

Agradeço quem possa me ajudar.

Hernani

Como Transportar Variavel De Html Para Php

12/05/2011, 09:43

OLá, Como transportar o conteudo de uma variavel em html para php

--------------------------------------------------------------------------
<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(); // Transportar estas variaveis para php abaixo.
var strQd = $('#quadra').val(); // para realizar o Sql
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 where bairro = 'colocar variavel aqui' and quadra = 'colocar variavel aqui'");
$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>

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

IPB Skin By Virteq