Question

我目前有一些代码，当您按下提交按钮时，应根据下拉列表框中的值将标记放在地图上。我已经做到这一点，以便下拉框中的值将通过PHP代码的GET表单方法进入URL，并且还将值通过参数传递给javascript函数。

我遇到的问题是我必须按两次提交按钮才能使标记显示在地图上。这不太理想，我正在寻找一些帮助来尝试解决这个问题。感谢。

这是javascript函数代码：

function placeMarker(address) 
        {       
            // ... Set up map code here

            var map = new google.maps.Map(document.getElementById("universityMap"), myOptions);

            <?php
                $uniname = $_GET['uninames'];       

                //Get the Uni code according to the uni name
                $queryUniID = $mysqli->prepare("SELECT IdCode FROM universityid WHERE UniName = ?");
                $queryUniID->bind_param('s', $uniname);
                $queryUniID->execute();
                $queryUniID->bind_result($unicode);
                $queryUniID->fetch();
                $queryUniID->close();

                //Load the question data into relevant variables
                $queryQuestions = $mysqli->prepare("SELECT QuestionNo, Answered1, Answered2, Answered3, Answered4, Answered5 FROM nssdata WHERE UniID = ?");
            ?>

            address = address + ", UK";
            geocoder.geocode({'address': address}, function(results, status) 
            {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                    marker = new google.maps.Marker(
                    {
                        map: map,
                        position: results[0].geometry.location,
                        title: address, 
                        draggable: false
                    });
                }
                else 
                {
                    alert(status);
                }
            });
        }

这是我的html表单：

        <form action="#" onsubmit="placeMarker(this.uninames.value)" method="get">

Answer 1

如果您的值都在适当的范围内，这实际上应该有效。在测试此版本的简化版本时，我可以输入一个地址，点击提交，标记会显示在它们应该的位置。

关于为什么你在看到结果之前点击两次，我有一些理论。

（1）查找延迟：确保跟踪地理编码器状态并为其提供充足的时间。

（2）故障：在某些地图渲染器中，您有时需要为标记循环地图。例如，这组连续调用：marker.setMap( null ); marker.setMap( map );将隐藏/显示标记，有时甚至会取消显示。

（3）提交中断：如果界面比您所说的更复杂且可能存在干扰，则可能需要阻止您的表单提交（＃）提交。换句话说，您必须在单击提交后停止浏览器转到＃地址，这样您就可以让JavaScript / ajax完成其工作。

这是表单的简化版本;请注意返回（错误）部分 - 它会阻止浏览器地址更改为＃。

<form action="#" onsubmit="placeMarker('adr');return( false );" method="get">
    <input type="text" id="id_address" />
    <input type="submit" />
</form>

请注意，我将此地址简化为文字;在我的实际测试中，我以这种方式发送数据：

placeMarker(document.getElementById('id_address').value);

Google标记展示位置

1 个答案: