0

我从 https://developers.google.com/maps/articles/phpsqlajax_v3 开始，并使用 https://developers.google.com/maps/articles/phpsqlsearch_v3尝试动态过滤来自 mysql 数据库的内容并更新我的基于返回结果的标记。我的 php 返回一个有效的 xml 文件，所以不用担心。我只是不确定我在清除和从新查询中创建新标记时做错了什么。load() 函数给了我一个不错的新地图，上面有标记，但表单似乎没有做任何事情。我什至尝试让表单按钮调用 clearLocations() 并且没有任何反应。屏幕有点闪烁，但所有点都留在那里。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Property Sales</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[


var markersArr = [];
var map;
var infoWindow;

function updateMap(){
var maxbid = document.getElementById('maxbid').value;
var minbid = document.getElementById('minbid').value;
var salestatus = document.getElementById('salestatus').value;
var saledate = document.getElementById('saledate').value;

infoWindow = new google.maps.InfoWindow;

 var queryString = "phpsqlajax_genxml3dynamic.php?maxbid=" + maxbid + "&minbid=" + minbid + "&salestatus=" + salestatus + "&saledate=" + saledate;
//var queryString = "phpsqlajax_genxml3dynamic.php?maxbid=" + maxbid + "&minbid=" + minbid;
queryString="phpsqlajax_genxml3dynamic.php?maxbid=340000&minbid=0&salestatus=*&saledate=*";
downloadUrl( queryString, function(data) {
        var xml = data.responseXML;
         markers = xml.documentElement.getElementsByTagName("marker");
clearLocations();
        for (var i = 0; i < markers.length; i++) {
          var SaleDate = markers[i].getAttribute("SaleDate");
          var CaseNumber = markers[i].getAttribute("CaseNumber");
          var Address = markers[i].getAttribute("Address");
          var ZipCode = markers[i].getAttribute("ZipCode");
          var Plaintiff = markers[i].getAttribute("Plaintiff");
          var Defendant = markers[i].getAttribute("Defendant");
          var Attorney = markers[i].getAttribute("Attorney");
          var SoldTo = markers[i].getAttribute("SoldTo");
          var PID = markers[i].getAttribute("PID");
          var Appraisal = markers[i].getAttribute("Appraisal");
          var MinBid = markers[i].getAttribute("MinBid");
          var SaleAmt = markers[i].getAttribute("SaleAmt");
          var SaleStatus = markers[i].getAttribute("SaleStatus");


          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("Latitude")),
              parseFloat(markers[i].getAttribute("Longitude"))
              );
   var info = "<b>Sale Date:" + SaleDate +"<br/>Address:"+ Address+"<br/>Sale Amount:" + SaleAmt + "</b> <br/>Sale Date:" + SaleDate+ "<br/>Case Number:"+ CaseNumber+ "<br/>Address:"+ Addre\
ss+ "<br/>Zipcode:"+ ZipCode+ "<br/>Plaintiff:"+ Plaintiff+ "<br/>Defendant:"+ Defendant+ "<br/>Attorney:"+ Attorney+ "<br/>Sold to:"+ SoldTo+ "<br/>Parcel ID:"+ PID+ "<br/>Appraisal:"+ Appraisal+\
 "<br/>Minimum bid:"+ MinBid+ "<br/>Sale amount:"+ SaleAmt+ "<br/> Sale status:"+ SaleStatus;

          var icon = customIcons[SaleStatus] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, info);
markersArr.push(marker);
        }
      });

}


    var customIcons = {
      ACTIVE: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      CANCELLED: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      NOBIDNOSALE: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
   },
      SOLD: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };



function clearLocations() {
     infoWindow.close();
     for (var i = 0; i < markers.length; i++) {
       markersArr[i].setMap(null);
     }
     markersArr.length = 0;
}

    function load() {
       map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(39.7620028,-84.3542049),
        zoom: 10,
        mapTypeId: 'roadmap'
      });
      infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
//      downloadUrl("phpsqlajax_genxml3.php", function(data) {
downloadUrl( "phpsqlajax_genxml3dynamic.php?maxbid=54,000&minbid=0&salestatus=*&saledate=*", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var SaleDate = markers[i].getAttribute("SaleDate");
          var CaseNumber = markers[i].getAttribute("CaseNumber");
          var Address = markers[i].getAttribute("Address");
          var ZipCode = markers[i].getAttribute("ZipCode");
          var Plaintiff = markers[i].getAttribute("Plaintiff");
          var Defendant = markers[i].getAttribute("Defendant");
          var Attorney = markers[i].getAttribute("Attorney");
          var SoldTo = markers[i].getAttribute("SoldTo");
          var PID = markers[i].getAttribute("PID");
          var Appraisal = markers[i].getAttribute("Appraisal");
          var MinBid = markers[i].getAttribute("MinBid");
          var SaleAmt = markers[i].getAttribute("SaleAmt");
          var SaleStatus = markers[i].getAttribute("SaleStatus");


          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("Latitude")),
              parseFloat(markers[i].getAttribute("Longitude")));

 var info = "<b>Sale Date:" + SaleDate +"<br/>Address:"+ Address+"<br/>Sale Amount:" + SaleAmt + "</b> <br/>Sale Date:" + SaleDate+ "<br/>Case Number:"+ CaseNumber+ "<br/>Address:"+ Addre\
ss+ "<br/>Zipcode:"+ ZipCode+ "<br/>Plaintiff:"+ Plaintiff+ "<br/>Defendant:"+ Defendant+ "<br/>Attorney:"+ Attorney+ "<br/>Sold to:"+ SoldTo+ "<br/>Parcel ID:"+ PID+ "<br/>Appraisal:"+ Appraisal+\
 "<br/>Minimum bid:"+ MinBid+ "<br/>Sale amount:"+ SaleAmt+ "<br/> Sale status:"+ SaleStatus;

          var icon = customIcons[SaleStatus] || {};

          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, info);
markersArr.push(marker);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
  request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>
  </script>
  </head>

 <body onload="load()">
<form name='myForm'>
Min Bid $ :<input type='text' id='minbid' value='1,000' />  and
 $ :<input type='text' id='maxbid' value='1,000,000' />  <br>
Sale Status:<select id='salestatus'>
<option value="*" selected>All</option>
<option>Active</option>
<option>Sold</option>
<option>Cancelled</option>
<option>No Bid, No Sale</option>
</select>
<br>
Sale Date:<select id='saledate'>
<option value="*" selected>All</option>
<option>2012-06-08</option>
<option>2012-06-01</option>
<option>2012-05-25</option>
<option>2012-05-18</option>
<option>2012-05-11</option>
<option>2012-05-04</option>
<option>2012-04-27</option>
<option>2012-04-20</option>
<option>2012-04-13</option>
<option>2012-04-06</option>
<option>2012-03-30</option>
<option>2012-03-23</option>
<option>2012-03-16</option>
<option>2012-03-09</option>
<option>2012-03-02</option>
</select>
<input type='button' onclick='updateMap()' value='Update Map' />
</form>

    <div id="map" style="width: 95%; height: 85%"></div>
  </body>
</html>

我再次 99.9% 确定 php 没有问题，因为它返回用于填充字段的有效结果。我对我在更新中做错了什么感到困惑。嘿，这不是垃圾邮件，让我发布这个问题。

4

1 回答 1

0

您的clearLocations函数正在循环，其中markers不markersArr包含现有的标记引用。

应该

function clearLocations() {
     infoWindow.close();
     for (var i = 0; i < markersArr.length; i++) {
       markersArr[i].setMap(null);
     }
     markersArr.length = 0;
}
于 2012-04-05T03:02:29.203 回答