谷歌地圖動態標記
[英]google dynamic marker of maps
問題描述
我想做的是：
當我在組合框項目上選擇時，從數據庫中獲取項目並顯示所有標記。 但這不起作用。 這是我的代碼：
index.php
<?php
session_start();
$_SESSION['sum']=0;
include("database/connect_conf.php");
if(!connection()){
echo 'Not connect: '.mysql_error();
}else{
connection();
}
if(!db_select()){
echo 'Not connect to Dabatase: '.mysql_error();
}else{
db_select();
}
$string="SELECT count(province_id) AS c FROM tbl_cep_forum";
$get_result=mysql_query($string);
if($get_result){
$j=1;
while($value=mysql_fetch_array($get_result)){
$_SESSION['sum']=$_SESSION['sum']+$value['c'];
$j++;
}
}
?>
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE-QQqQ"
type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="includes/style_map.css" />
<script type="text/javascript" src="includes/jquery-1.5.min.js"></script>
<script type="text/javascript" src="includes/interactive_map.js"></script>
<script type="text/javascript" src="includes/js_map.js"></script>
<script type="text/ecmascript" src="includes/ajax_google.js"></script>
<script type="text/javascript">
//<![CDATA[
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons= iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(12.5, 104.98386), 7);
// Change this depending on the name of your PHP file
GDownloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// var pro_id=markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var address = markers[i].getAttribute("address");
var description = markers[i].getAttribute("description");
var marker = createMarker(point, name, address, type,name,description);
// marker.url='http://www.jaukjey.com';
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type,id,description) {
var marker = new GMarker(point, customIcons);
var html_a = "<b>" + name + "</b> <br/>"+ type;
// var html = "<b>" + name + "</b> <br/>" + type;
GEvent.addListener(marker, 'click', function() {
// window.location.href = marker.url;
var imag_info='<img class="city_photo" src="images/cities/sydney.jpg" alt="sydney" width="75" height="75" />';
var sideHtml='<div class="city_info"><div id="'+name+'" class="dot" continent="'+name+'">'+imag_info+'<br><b>Addres:</b></br><h2>Province Name:....</h2><br></br>'+description+'</div></div>';
$('.detail_container').fadeOut(500,function(){
$('.detail_container .city_detail').html(sideHtml);
$(".detail_container").fadeIn(500);
})
// $(".city_detail").html(sideHtml);
var div=document.getElementById(id);
marker.openInfoWindowHtml(html_a);
});
return marker;
}
/*function Get marker by province*/
function phpajax_get_Province(){
$('#t2').load('phpajax_get_uniq_province.php').show();
var get_name=$('#continent').val();
$.post('phpajax_get_uniq_province.php', { continent: get_name },
function(return_data){
$('#t2').html(return_data).show();
});
alert('Province name is: '+ get_name);
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(12.5, 104.98386), 7);
// Change this depending on the name of your PHP file
GDownloadUrl("phpajax_get_uniq_province.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// var pro_id=markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var address = markers[i].getAttribute("address");
var description = markers[i].getAttribute("description");
var marker = createMarker(point, name, address, type,name,description);
map.addOverlay(marker);
//alert('Has reloded!'+ name+"<br></br>"+ type);
}
});
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()" bgcolor="#99b3cc">
<div id="menu_title"><a href="">Forum</a><a href="">Training</a></div>
<div class="map_contianer">
<div id="map" style="width: 600px; height: 500px;"></div>
<!-- Form -->
<form id="mapForm" name="mapForm" class="form_continent" method="post" action="">
<select name="continent" id="continent" onchange="javascript:phpajax_get_Province();">
<?php
$str="select * from tbl_cep_province";
$result=mysql_query($str);
if($result){
$i=1;
while($value=mysql_fetch_array($result)){
?>
<option value="<?php echo $value['id'];?>">
<?php echo $value['name'];?>
</option>
<?php }
$i++;
}else{echo 'Can not select table number.';}?>
<option value="ALL" selected="selected">Show all provinces</option>
</select>
</form>
<table class="collape_main_contianer" border="0">
<tr><td class="list_event_province">
<div style="background-color:#00F; padding-left:5px; font-size:18px; font-weight:bold;">All Medias</div>
<ul>
<li><a href="">Download Video</a></li>
<li><a href="">Download Audio</a></li>
</ul>
<div style="background-color:#00F; padding-left:5px; font-size:18px; font-weight:bold;">Total All Forum: <?php echo $_SESSION['sum'];?></div>
</td></tr>
<tr><td>
<div class="detail_container">
<!-- City details -->
<div class="city_detail">
<!-- City -->
<h3>Choose a province</h3>
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula.</p>
<p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam.</p>
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula.</p>
<p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam.</p>
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula.</p>
<p>Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam.</p>
</div>
</div>
</td></tr>
</table>
</div>
<div id="t2">return value here</div>
<div id="left_content"><p class="grey" align="justify">
<?php
$str="SELECT tbl_cep_province.id,tbl_cep_province.name FROM tbl_cep_province";
$result=mysql_query($str);
if($result){
$i=1;
while($get_values=mysql_fetch_array($result)){
//$_SESSION['name_province']=$values['id'];
$string="SELECT tbl_cep_province.name,count(province_id) AS c
FROM tbl_cep_forum
INNER JOIN tbl_cep_province ON tbl_cep_province.id = tbl_cep_forum.province_id
WHERE tbl_cep_forum.province_id='".$get_values['id']."'";
$get_result=mysql_query($string);
if($get_result){
$j=1;
while($value=mysql_fetch_array($get_result)){?>
<table cellpadding="0" cellspacing="1">
<tr bgcolor="#ECECEC" onMouseOver="this.style.backgroundColor='transparent'" onMouseOut="this.style.backgroundColor='#ECECEC'">
<td style="width:150px; float:left; padding-left:10px;"><?php echo $value['name'];?></td><td style="padding-left:10px; width:30px; float:left;"><?php echo $value['c'];?></td></tr>
</table>
<?php
$j++;
}
}
$i++;
}
}
?>
</p>
</div>
<div class="city_detail_container">
<!-- City -->
<div class="city_detail" id="sydney">
<img class="city_photo" src="images/cities/sydney.jpg" alt="sydney" width="75" height="75" />
<div class="city_info">
<h2>Sydney 123</h2>
<h3>Australia</h3>
<p>Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos commodo in interdum vitae leo.</p>
</div>
</div>
<div class="clear_both"></div>
</div><!--close city_detail_container-->
</div><!--Close map_container-->
</body>
</html>
phpajax_get_uniq_province.php
<?php
require("database/connect_conf.php");
if(!connection()){
echo 'Not connect: '.mysql_error();
}else{
connection();
}
if(!db_select()){
echo 'Not connect to Dabatase: '.mysql_error();
}else{
db_select();
}
if (isset($_POST['continent'])){
$name=$_POST['continent'];
?>
<script type="text/javascript">alert('The post name is set!');</script>
<?php
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
//include("images/template/dots.png");
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE name='$name'";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'description="' . parseToXML($row['description']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
}else{
?>
<script type="text/javascript">alert('Can not get post');</script>
<?php
}
?>
phpsqlajax_genxml.php
<?php
require("database/connect_conf.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
//include("images/template/dots.png");
if(!connection()){
echo 'Not connect: '.mysql_error();
}else{
connection();
}
if(!db_select()){
echo 'Not connect to Dabatase: '.mysql_error();
}else{
db_select();
}
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'description="' . parseToXML($row['description']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>
1 個解決方案
解決方案1
0 2011-04-12 07:47:22
您的第一部戲可能是您正在使用$.load()函數和$.post()函數通過jQuery調用相同的PHP腳本：
$('#t2').load('phpajax_get_uniq_province.php').show();
var get_name=$('#continent').val();
$.post('phpajax_get_uniq_province.php', { continent: get_name },
我毫不懷疑這是許多問題中的第一個。 您確實確實需要將代碼切成碎片，使用Firebug或類似工具獨立運行它們，以查看交互，然后在證明每個段都沒有錯誤的情況下將其組合。
Google Maps API標記
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.