范围错误：google map api中超出了最大调用堆栈大小

Question

我正在使用google map api，我维护单独的数据库（mysql），其中包含位置（地址和latlng），当我调用单个位置时它可以工作，但是当有多个位置放置标记时地图，谷歌开发工具说uncaught Range error: maximum call stack size exceeded。我已尝试过interweb中的所有来源，所有结果都是否定的。

    $(document).ready(function(){
            $("#searchbutton").click(function(){
                var category = document.getElementById("categoryinput").value;
                var place = document.getElementById("placeinput").value;
                $("#mapcontainer").css("display","block");
                $.get("http://localhost:80/rule/search.php?category="+category+"&place="+place, function(data){
                    $("#hiddeninput").val(data);
                    //Initialize the Google Maps
                    var geocoder;
                    var map;
                    var markersArray = [];
                    var infos = [];
                    geocoder = new google.maps.Geocoder();
                    var myOptions = {
                          mapTypeId: google.maps.MapTypeId.ROADMAP,
                          zoom: 9
                        };
                    //Load the Map into the map_canvas div
                    var map = new google.maps.Map(document.getElementById("mapcontainer"), myOptions);
                    map = new google.maps.Map(document.getElementById("mapcontainer"), myOptions);

                    //Initialize a variable that the auto-size the map to whatever you are plotting
                    var bounds = new google.maps.LatLngBounds();
                    //Initialize the encoded string       
                    var encodedString;
                    //Initialize the array that will hold the contents of the split string
                    var stringArray = [];
                    //Get the value of the encoded string from the hidden input
                    encodedString = document.getElementById("hiddeninput").value;
                    //Split the encoded string into an array the separates each location
                    stringArray = encodedString.split("****");

                    var x;
                    for (x = 0; x < stringArray.length; x = x + 1)
                    {
                        var addressDetails = [];
                        var markericon = 'img/mapmarker.png';
                        var marker;
                        //Separate each field
                        addressDetails = stringArray[x].split("&&&");
                        //Load the lat, long data
                        var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
                        //Create a new marker and info window
                        marker = new google.maps.Marker({
                            map: map,
                            position: lat,
                            animation: google.maps.Animation.DROP,
                            //Content is what will show up in the info window
                            content: addressDetails[0],
                            icon: markericon
                        });
                        //Pushing the markers into an array so that it's easier to manage them
                        markersArray.push(marker);
                        google.maps.event.addListener( marker, 'click', function () {
                            closeInfos();
                            var info = new google.maps.InfoWindow({content: this.content});
                            //On click the map will load the info window
                            info.open(map,this);
                            infos[0]=info;
                        });
                       //Extends the boundaries of the map to include this new location
                       bounds.extend(lat);
                    }
                    //Takes all the lat, longs in the bounds variable and autosizes the map
                    map.fitBounds(bounds);

                    //Manages the info windows
                    function closeInfos(){
                    if(infos.length > 0){
                      infos[0].set("marker",null);
                      infos[0].close();
                      infos.length = 0;
                        }
                    }
                });
            });
        });

此代码发送jquery ajax请求

    <?php

header('Access-Control-Allow-Origin:*');

//create connection to database MYSQL

mysql_connect('localhost','root','');
mysql_select_db('locations') or exit('no db found');

$category = $_GET['category'];
$place = $_GET['place'];



if(empty($category) && empty($place)){
    echo "invalid input";
}
else{

    $searchquery ="SELECT * FROM `locationDatabase` WHERE `category`='$category'and `nagar`='$place' or `area`='$place'";
    $searchqueryexecute = mysql_query($searchquery);
    while($rows = mysql_fetch_assoc($searchqueryexecute)) {
        # code...

        $encodedstring = "";
        $x = 0;


        if($x == 0){
            $seperator = "";
        }
        else{
            $seperator = "****";
        }
        $encodedstring = $encodedstring.$seperator.
        "<p class='info'><b>".$rows['name'].
        "</b><br><b>".$rows['door_no'].
        "</b><br><b>".$rows['street'].
        "</b><br><b>".$rows['nagar'].
        "</b><br><b>".$rows['area'].
        "</b><br><b>".$rows['city']."-".$rows['zipcode'].
        "</b></p>&&&".$rows['latitude']."&&&".$rows['longitude'];
        $x = $x + 1;

        echo $encodedstring;    
    }

}

?>

Answer 1

您的代码附加额外的＆＃34; ****＆＃34;到数据字符串的末尾。这会导致将额外的空点添加到地图中，这会使边界无效。在创建制造商之前添加错误检查：

if (isNaN(addressDetails[1]) || isNaN(addressDetails[2])) {
  alert("invalid data point:"+x+" ("+addressDetails[1]+","+addressDetails[2]+")");
  continue;
}

或删除额外的＆＃34; ****＆＃34;从数据的末尾开始。

看起来你的PHP应该是（只有在完成后才将字符串回显到输出）：

$encodedstring = "";
$x = 0;
while($rows = mysql_fetch_assoc($searchqueryexecute)) {
    # code...

    if($x == 0){
        $seperator = "";
    }
    else{
        $seperator = "****";
    }
    $encodedstring = $encodedstring.$seperator.
    "<p class='info'><b>".$rows['name'].
    "</b><br><b>".$rows['door_no'].
    "</b><br><b>".$rows['street'].
    "</b><br><b>".$rows['nagar'].
    "</b><br><b>".$rows['area'].
    "</b><br><b>".$rows['city']."-".$rows['zipcode'].
    "</b></p>&&&".$rows['latitude']."&&&".$rows['longitude'];
    $x = $x + 1;

}
echo $encodedstring;