Google 地图：使用 mysql 查询更新标记不起作用

Question

I started with https://developers.google.com/maps/articles/phpsqlajax_v3 and am using https://developers.google.com/maps/articles/phpsqlsearch_v3 to try to dynamically filter the content from a mysql DB and update my markers based on the returned results.我从https://developers.google.com/maps/articles/phpsqlajax_v3开始，正在使用https://developers.google.com/maps/articles/phpsqlsearch_v3尝试动态过滤 mysql 数据库中的内容并更新我的基于返回结果的标记。 My php returns a valid xml file so no worries there.我的 php 返回一个有效的 xml 文件，所以不用担心。 I'm just not sure what I'm doing wrong for the clearing and creating the new markers from the new query.我只是不确定从新查询中清除和创建新标记我做错了什么。 The load() function gives me a nice new map with markers on it, but the form doesn't seem to do anything. load() function 给了我一个漂亮的新 map 上面有标记，但表单似乎没有做任何事情。 I even tried just have the form button call clearLocations() and nothing happens.我什至尝试只让表单按钮调用 clearLocations() 并且没有任何反应。 The screen kinda blinks but all the points stay there.屏幕有点闪烁，但所有的点都留在那里。

<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>

Again I'm 99.9% sure the php is fine since it returns valid results which are used to populate the field.同样，我 99.9% 确定 php 没问题，因为它返回用于填充字段的有效结果。 I'm befuddled as to what I've done wrong for the update.我对我在更新中做错了什么感到困惑。 Hey SO this isn't spam let me post this dang question.嘿，这不是垃圾邮件，让我发布这个该死的问题。

Answer 1

Your clearLocations function is looping over markers not markersArr which contains the existing marker references.您的clearLocations function 循环遍历markers而不是包含现有标记引用的markersArr 。

Should be应该

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

Google 地图：使用 mysql 查询更新标记不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2012-04-05 03:02:29

Google 地图：使用 mysql 查询更新标记不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2012-04-05 03:02:29

解决方案1
0 已采纳 2012-04-05 03:02:29