使用Javascript和PHP通过下拉表单在网页上加载Google地图

时间:2013-07-07 04:46:16

标签: php javascript mysql google-maps

我在html页面上有两个下拉列表。数据来自mysql数据库,包含纬度,经度和地址等信息。用户从下拉列表中选择一个项目,然后单击“提交”。

在这个阶段,我想显示一个谷歌地图,并在经度和纬度放置一个标记。然后,当用户从第二个下拉列表中选择选项时,我想在该地图上添加一个标记。

目前,我可以在从第一个下拉列表中点击提交后加载地图,但我尝试删除引脚的所有选项都无效。

这是我到目前为止所获得的代码:

<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once('auth.php');
include ('LoginConfig.php');
include ('FetchAgentDetails.php');
include ('FetchDeliveryDetails.php');
?>



<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Delivery Management System</title>
        <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA0Rm5aK0BYu1f_TzhjkG97cchHHlQfrQY&sensor=false">
</script>
<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

        <style type="text/css">
            <!--
            .style1 {
                font-size: 20px;
                font-weight: bold;
            }

            -->
        </style>
        <style type="text/css">
            table.collection {width:250px;border:2px solid black;border-style: outset;border-collapse:collapse;}
            table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;padding:10px;}
            table.collection tr:hover {background-color:#ffe;}
            table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:10px;}
            table.collection td a {text-decoration:none; display:table-row; padding:0px; height:100%;}
        </style>

    </head>

    <body bgcolor="#8E8E38"
        <div style="clear: right;">
            <p align="left" class="style1">Welcome Delivery Manager! </p>
            <img style="position: absolute; top: 0; right: 0;" src="./Images/logo.jpg" alt="Company Logo" width="90" height="60" align="middle"></img>
        </div>
        <p align="left"><a href ="Home.php">Home</a></p>
        <hr></hr>    


        <!-- START Main Wrap -->
        <form method="post">
            <fieldset>
                <div style="clear: left;float:left;">
                    <label for="deliveryList">Delivery Items:</label>
                    <select name="deliveryList" id="deliveryList">
                        <option value="Select delivery item" selected="selected">Select delivery item</option>
<?php
$deliveryHandler = new FetchDeliveryDetails();
$itemNameArray = $deliveryHandler->getItemNames();

foreach ($itemNameArray as $innerArray) {
    if (is_array($innerArray)) {
        $value = $innerArray['itemName'];
        echo "<option value=\"$value\"";
        if (isset($_POST['deliveryList']) && $_POST['deliveryList'] == $value)
            echo 'selected';
        echo ">" . $value . "</option>\n";
    }
}
?>
                    </select>
                    <input type="submit" name="submit" id="submit"  value="Submit"/>
                </div>

                <div style="clear: right;float:right;">
                    <label for="agentList">Avaliable Agent:</label>
                    <select name="agentList" id="agentList">
                        <option value="" selected="selected">Select agent to assign</option>
<?php
$agentHandler = new FetchAgentDetails();
$agentNameArray = $agentHandler->getAgentNames();
foreach ($agentNameArray as $innerArray) {
    if (is_array($innerArray)) {

        $agentId = $innerArray['agentId'];
        $firstNameValue = $innerArray['firstname'];
        $lastNameValue = $innerArray['lastname'];
        $fullName = $firstNameValue . ' ' . $lastNameValue;
        echo "<option value=\"$agentId\">$fullName</option>\n";
    }
}
?>
                    </select>
                    <input type="submit" name="agentSubmit" id="agentSubmit"  value="Check Location"/>
                </div>
            </fieldset>
        </form>
<?php
if (isset($_POST['deliveryList'])) {
    $selectedItemName = $_POST['deliveryList'];
    $deliveryHander = new FetchDeliveryDetails();
    $itemDetailsArray = $deliveryHander->getAllDeliveryDetails($selectedItemName);
    foreach ($itemDetailsArray as $valuesArray) {
        $itemNameValue = $valuesArray['itemName'];
        $itemDescriptionValue = $valuesArray['itemDescription'];
        $ownerFirstname = $valuesArray['firstName'];
        $ownerLastname = $valuesArray['lastName'];
        $dateAdded = $valuesArray['dateAdded'];
        $deliveryDate = $valuesArray['deliveryDate'];
        $deliveryAddress = $valuesArray['deliveryAddress'];
        $deliveryLatitude = $valuesArray['deliveryLatitude'];
        $deliveryLongitude = $valuesArray['deliveryLongitude'];
        $assignedAgent = $valuesArray['assignedAgentId'];
        if ($assignedAgent == 0) {
            $assignedAgent = "-";
        }
        echo "<table border=\"1\" align=\"left\" class =\"collection\">\n";
        echo "<tr>\n";
        echo "<td >Item Name:<b>$itemNameValue</td>\n";
        echo "</tr>\n";
        echo "<tr>\n";
        echo "<td>Item Description: <b>$itemDescriptionValue</td>\n";
        echo "</tr>\n";
        echo "<tr>\n";
        echo "<td>Owner Name: <b>$ownerFirstname $ownerLastname</td>\n";
        echo "</tr>\n";
        echo "<tr>\n";
        echo "<td>Date Added: <b>$dateAdded</td>\n";
        echo "</tr>\n";
        echo "<tr>";
        echo "<td>Delivery Date: <b>$deliveryDate</td>";
        echo "</tr>";
        echo "<tr>";
        echo "<td>Delivery Address: <b>$deliveryAddress</td>";
        echo "</tr>";
        echo "<tr>";
        echo "<td>Assigned Agent: <b>$assignedAgent</td>";
        echo "</tr>";
        echo "</table>";
        echo "<div id=\"googleMap\" style=\"width:500px;height:380px;\"></div>";
    }
}
if (isset($_POST['agentList'])) {

}
?>

    </body>
</html>

我差点忘了,这是我的第一个PHP应用程序,实际上是我的第一个Web应用程序。所以请放轻松我。指出其他错误,但请坚持这个问题。

1 个答案:

答案 0 :(得分:0)

好的,使用iframe :)和一点php

工作

参考:

http://www.youtube.com/watch?v=HTm-3Cduafw

echo "<iframe style =\"display: block;
    width: 800px;
    padding-top: 2px;
    height: 400px;
    margin: 0 auto;
    border: 0;\" width=\"425\" height=\"350\" align=\"center\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" 
src=\"https://maps.google.com/maps?f=d&amp;source=s_d&amp;saddr=$agent_map_url&amp;
daddr=$map_url&amp;hl=en&amp;z=10&amp;t=m&amp;mra=ls&amp;ie=UTF8&amp;output=embed\"></iframe><br/>";