【问题标题】:I want a map with values inserted from the user and that values on a database我想要一张地图,其中包含从用户插入的值以及数据库中的值
【发布时间】:2013-02-04 09:26:02
【问题描述】:

下面是我的“home.php”代码。我想插入一些与地址相关联的值,将它们(查找并输入从用户插入的地址的纬度和经度)放入数据库和带有标记的地图中。

问题是,当 codeaddress() 执行时,它恰好在 geocoder.geocode({'address': address},function(results, status) {..} 之前停止,我无法将纬度和对数放入我的数据库,并且地图中没有标记。

如果我删除 <form action="home.php" method="post" width="300px" height="300px"> 行(当然还有 insertinDb() 的部分,因为现在我没有任何 $_POST 值)codeaddress() 有效,并且我有标记和纬度和经度值。

如果我删除对 codeaddress() 的调用,insertinDB() 可以工作(当然没有插入 lat 和 lng 值)。

我哪里错了?如果问题中有什么不清楚的地方,请问我。

<!DOCTYPE html>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<HTML>
    <HEAD>
        <script type="text/javascript" src="jquery.js"></script>
        <META NAME="GENERATOR" Content="AlterVista - Editor HTML">
        <title>LowPricePetrol</title>
        <link rel="stylesheet" type="text/css" href="homeformat.css"/>
        <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/PRIVATEKEY=true">
        </script>
        <script type="text/javascript">
            var geocoder;
            var map;
            var lat_;
            var lng_;

            function initialize() {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(41.92, 12.93);
                var mapOptions = {
                  zoom: 6,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            }

            function codeAddress() {
                var contentString = '<div id="content">'+
                '<h2 id="firstHeading" class="firstHeading">' + document.getElementById("nome").value + '</h2>'+
                '<div id="bodyContent"><u>Indirizzo</u>: ' + document.getElementById("indirizzo").value + ' ' + document.getElementById("civico").value +'<br><u>Citta</u>: '+ document.getElementById("citta").value
                + '<br><u>Paese</u>: ' + document.getElementById("paese").value + '<br><u>Prezzo Benzina</u>: ' + document.getElementById("prezzoB").value + ' (euro/litro)</div>' + 
                '<u>Prezzo Diesel</u>: ' + document.getElementById("prezzoD").value +
                ' (euro/litro)</div>'+
                '</div>';
                var image = '/img/'+ document.getElementById("nome").value +'.png';
                var infowindow = new google.maps.InfoWindow({content: contentString});
                var ind2_map = document.getElementById("indirizzo").value;
                var civ_map = document.getElementById("civico").value;
                var cit2_map = document.getElementById("citta").value;
                var pae2_map = document.getElementById("paese").value;
                var address = ind2_map + " " + civ_map + ", " + cit2_map + ", "+ pae2_map ;
                alert(address);
                geocoder.geocode({'address': address},function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        alert(results[0].geometry.location);
                        lat_ =results[0].geometry.location.lat();
                        alert(lat_);
                        lng_ =results[0].geometry.location.lng();
                        alert(lng_);
                        document.getElementById('lat').value = lat_;
                        document.getElementById('lng').value = lng_;
                        var marker = new google.maps.Marker({
                            map: map,
                            icon:image,
                            position: results[0].geometry.location
                        });
                        google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,marker);});
                    }  else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            }       
        </script>

        <?php
            function insertInDb() {
                $database = mysql_connect( CONNECTION DB);
                if (!$database) {
                    die('Could not connect: ' . mysql_error());
                }

                mysql_select_db("NAME DB", $database);

                $sql="INSERT INTO Dati(NomeLuogo, Indirizzo, Citta, Paese, PrezzoB, PrezzoD, Lat, Lng)
                VALUES
                ('$_POST[nome]','$_POST[indirizzo]','$_POST[citta]','$_POST[paese]','$_POST[prezzoB]', '$_POST[prezzoD]', '$_POST[lat]', '$_POST[lng]')";

                if (!mysql_query($sql,$database)) {
                    die('Error: ' . mysql_error());
                }
                mysql_close($database);
            }
        ?>

    <script type="text/javascript">
        function check_form(){
            var check_n = document.getElementById("nome").value;
            var check_i = document.getElementById("indirizzo").value;
            var check_civ = document.getElementById("civico").value;
            var check_cit = document.getElementById("citta").value;         
            var check_pa = document.getElementById("paese").value;
            var check_prb = document.getElementById("prezzoB").value;
            var check_prd = document.getElementById("prezzoD").value;
            if(check_n == "" || check_i == ""  || check_cit == ""  || check_pa == ""  || (check_prb == "" && check_prd == "") )
                alert("Tutti i campi con asterisco sono obbligatori (almeno un prezzo va inserito)");
            else{
                codeAddress();
            }
        }
    </script>
    </HEAD>
    <BODY onload="initialize();">
        <div class="titlebox" style="center">
            <img src="/img/Logo.png" alt="LowPricePetrol_Logo"  width="700" height="150" align=%u201Dcenter%u201D />
        </div>

        <?php
            if(isset($_POST["nome"]))
                insertInDb();
        ?>

        <div  class="insertbox" style="center">
            <br/>
            <form action="home.php" method="post" width="300px" height="300px">
                AGGIUNGI LA TUA SEGNALAZIONE
                <br/>
                <label for="nome">Seleziona il gestore:</label><br/>
                <select id="nome" name="nome">
                <option value="" selected="selected">-- seleziona --</option>
                <option value="Eni" id="Eni">Eni</option>
                <option value="Esso" id="Esso">Esso</option>
                <option value="Ip" id="Ip">Ip</option>
                <option value="Q8" id="Q8">Q8</option>
                <option value="Tamoil" id="Tamoil">Tamoil</option>
                <option value="Total" id="Total">Total</option>
                </select><br/>
                Indirizzo: <br/>
                <input type="text" name="indirizzo" id="indirizzo"/> <br/>
                Civico: <br/>
                <input type="text" size="4" name="civico" id="civico"/> <br/>
                Città: <br/>
                <input type="text" name="citta" id="citta"/> <br/>
                Paese: <br/>
                <input type="text" name="paese" id="paese"/> <br/>
                Prezzo benzina (euro/litro): <br/>
                <input type="text" name="prezzoB" size="5" id="prezzoB"/> <br/>
                Prezzo diesel (euro/litro): <br/>
                <input type="text" name="prezzoD" size="5" id="prezzoD"/> <br/>
                <input type="text" id="lat" name="lat"></input>
                <input type="text" id="lng" name="lng"></input>
                <br/>
                <input type="submit" name="invia"  onclick="check_form()"/>
            </form>
        </div>

        <div class="mapbox" id="map_canvas" style="width:700px; height:350px" ></div>
    </BODY>
</HTML>

【问题讨论】:

    标签: php javascript database google-maps


    【解决方案1】:

    地理编码是异步功能。您在获得结果之前被重定向到主页。您应该在收到数据后提交表格。 为了实现这个目标,你可以改变

    <input type="submit" name="invia"  onclick="check_form()"/>` 
    

    <input type="button" name="invia"  onclick="check_form()"/>
    

    <form action="home.php" method="post" width="300px" height="300px"> 
    

    <form action="home.php" method="post" width="300px" height="300px" name='sform'>
    

    并将document.sform.submit 添加到您的if (status == google.maps.GeocoderStatus.OK) { 部分代码的末尾。

    【讨论】:

    • 现在我可以看到标记和地理编码工作,但 insertindb() 的部分不起作用(即使我删除了 lat 和 lng 的部分以避免它会产生问题)。您以这种方式删除了重定向,那么现在如何将插入的值放入数据库中?
    • 其实document.sform.submit()部分必须提交你的表单。
    • 好吧,忘了我的最后一条评论!数据库的部分工作,即使 lat 和 lng 工作,因为地理编码执行。问题是标记,因为当然存在页面重定向。为了解决这个问题,我添加了一个读取数据库中每个条目并将标记放在地图上的方法(无论如何我都需要这个方法,所以这不是问题)。非常感谢!(如果您有什么要补充的,或者如果您认为我错了,请纠正我,我正在学习!)
    猜你喜欢
    • 1970-01-01
    • 2019-07-15
    • 2020-11-04
    • 2020-11-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多