簡體   English   中英

Google 地圖:使用 mysql 查詢更新標記不起作用

[英]Google Maps: update markers with mysql query doesn't work

我從https://developers.google.com/maps/articles/phpsqlajax_v3開始,正在使用https://developers.google.com/maps/articles/phpsqlsearch_v3嘗試動態過濾 mysql 數據庫中的內容並更新我的基於返回結果的標記。 我的 php 返回一個有效的 xml 文件,所以不用擔心。 我只是不確定從新查詢中清除和創建新標記我做錯了什么。 load() function 給了我一個漂亮的新 map 上面有標記,但表單似乎沒有做任何事情。 我什至嘗試只讓表單按鈕調用 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 沒問題,因為它返回用於填充字段的有效結果。 我對我在更新中做錯了什么感到困惑。 嘿,這不是垃圾郵件,讓我發布這個該死的問題。

您的clearLocations function 循環遍歷markers而不是包含現有標記引用的markersArr

應該

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM