LatLng界限顯示自定義標記

我正在使用下面的代碼在mySQL數據庫的給定位置顯示標記。我試圖設置LatLng邊界，以便我可以看到每個給定位置的所有標記，但它不起作用，即地圖不顯示可視地圖中的所有標記，並且還收到錯誤，指出'findid未定義「。作爲一個新的這個我不確定是否代碼或這段代碼的定位是錯誤的。LatLng界限顯示自定義標記

我只是想知道是否有可能請有人看看這個，讓我知道我要去哪裏錯了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>All Locations</title> 
     <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
     <script type="text/javascript"> 
      var customIcons = { 
      Artefact: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Coin: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Jewellery: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      } 
      }; 

      function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
      zoom:14, 
      mapTypeId: 'satellite' 
      }); 

      // Change this depending on the name of your PHP file 
      downloadUrl("phpfile.php", function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
      var findid = markers[i].getAttribute("findid"); 
      var locationid = markers[i].getAttribute("locationid"); 
      var dateoftrip = markers[i].getAttribute("dateoftrip"); 
      var findcategory = markers[i].getAttribute("findcategory"); 
      var findname = markers[i].getAttribute("findname"); 
      var finddescription = markers[i].getAttribute("finddescription"); 
      var detectorname = markers[i].getAttribute("detectorname"); 
      var searchheadname = markers[i].getAttribute("searchheadname"); 
      var detectorsettings = markers[i].getAttribute("detectorsettings"); 
      var pasref = markers[i].getAttribute("pasref"); 
      var findimage= markers[i].getAttribute("findimage"); 
      var additionalcomments= markers[i].getAttribute("additionalcomments"); 
      var point = new google.maps.LatLng( 
      parseFloat(markers[i].getAttribute("findosgb36lat")), 
      parseFloat(markers[i].getAttribute("findosgb36lon"))); 
      var icon = customIcons[findcategory] || {}; 
      var marker = new google.maps.Marker({   
      map: map, 
      position: point, 
      title: 'Click to view details', 
      icon: icon.icon, 
      shadow: icon.shadow 
      }); 

      } 
      }); 
      } 

      // Creating a LatLngBounds object 
      var bounds = new google.maps.LatLngBounds(); 
      // Looping through the places array 
      for (var i = 0; i < findid.length; i += 1) { 
      // Extending the bounds object with each LatLng 
      bounds.extend(findid[i]); 
      } 
      // Adjusting the map to new bounding box 
      map.fitBounds(bounds) 

      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()"> 
       <div id="map"></div> 
      </body> 
      </html>

更新的代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>All Locations</title> 
     <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" /> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
     <script type="text/javascript"> 
      var customIcons = { 
      Artefact: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Coin: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Jewellery: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      } 
      }; 

      var markers; 

      function load() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
      zoom:14, 
      mapTypeId: 'satellite' 
      }); 

      // Change this depending on the name of your PHP file 
      downloadUrl("phpfile.php", function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
      var findid = markers[i].getAttribute("findid"); 
      var locationid = markers[i].getAttribute("locationid"); 
      var dateoftrip = markers[i].getAttribute("dateoftrip"); 
      var findcategory = markers[i].getAttribute("findcategory"); 
      var findname = markers[i].getAttribute("findname"); 
      var finddescription = markers[i].getAttribute("finddescription"); 
      var detectorname = markers[i].getAttribute("detectorname"); 
      var searchheadname = markers[i].getAttribute("searchheadname"); 
      var detectorsettings = markers[i].getAttribute("detectorsettings"); 
      var pasref = markers[i].getAttribute("pasref"); 
      var findimage= markers[i].getAttribute("findimage"); 
      var additionalcomments= markers[i].getAttribute("additionalcomments"); 
      var point = new google.maps.LatLng( 
      parseFloat(markers[i].getAttribute("findosgb36lat")), 
      parseFloat(markers[i].getAttribute("findosgb36lon"))); 
      var icon = customIcons[findcategory] || {}; 
      var marker = new google.maps.Marker({   
      map: map, 
      position: point, 
      title: 'Click to view details', 
      icon: icon.icon, 
      shadow: icon.shadow 
      }); 
      } 
      }); 
       // Creating a LatLngBounds object 
      var bounds = new google.maps.LatLngBounds(); 
      // Looping through the places array 
      for (var i = 0; i < markers.length; i += 1) { 
      // Extending the bounds object with each LatLng 
      bounds.extend(markers[i]); 
      } 
      // Adjusting the map to new bounding box 
      map.fitBounds(bounds) 
      } 
      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()"> 
       <div id="map"></div> 
      </body> 
      </html>

來源

2011-08-18 IRHM

你通過findid陣列試圖循環當它不存在。有2個原因，爲什麼它好好嘗試一下存在：

這不是在你通過它
即使它試圖環路範圍內聲明的，它不會是直到後確定 Ajax請求，你用得到的XML數據，已完成

的「A」中的Ajax代表「異步」，也就是說，當你請求的東西，你的代碼立即繼續，並沒有按不等待服務器響應請求。

至於第一點，你傳遞給downloadUrl循環遍歷XML的<marker>元素翻出大量數據到本地變量，但它實際上並沒有做大部分任何功能。並且由於它們是本地的，所以在功能完成後它們不存在。事實上，他們只是被每個<marker>元素覆蓋，但就是這樣。

所以，不要試圖通過findid以外的函數（它不存在）循環，將循環中的代碼放入函數中，以便它實際上可以訪問您在那裏創建的標記。

編輯

這裏僅僅是load功能重寫，它應該工作（你仍然需要在代碼的其餘部分）。我已經刪除了所有的局部變量，因爲你不用任何東西。最後，您將根據緯度/經度構建一個標記 - 您未使用的所有其他數據。如果您需要它，請稍後添加。

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
     zoom:14, 
     mapTypeId: 'satellite' 
    }); 

    var bounds = new google.maps.LatLngBounds(); 
    var markers = []; 

    downloadUrl("phpfile.php", function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     // loop through the markers in the xml file 
     for (var i = 0; i < markers.length; i++) { 
      var point = new google.maps.LatLng( 
       parseFloat(markers[i].getAttribute("findosgb36lat")), 
       parseFloat(markers[i].getAttribute("findosgb36lon")) 
      ); 
      var icon = customIcons[findcategory] || {}; 
      var marker = new google.maps.Marker({   
       map: map, 
       position: point, 
       title: 'Click to view details', 
       icon: icon.icon, 
       shadow: icon.shadow 
      }); 
      // LatLngBounds expects a LatLng object - not a marker object 
      bounds.extend(point); 
     } 
     // fit the map after all the points and markers have been created - i.e. after the loop 
     map.fitBounds(bounds); 
    }); 
}

來源

2011-08-18 21:05:39 Flambino

嗨，非常感謝您花時間回覆我的文章。我知道這是由於我缺乏知識，但是我已經做出了我認爲你建議的更改，但是現在我得到錯誤'markers.length爲null或不是對象'。我在原始帖子中發佈了我的重做代碼。你可以看看這個，讓我知道我需要改變什麼。我明白，對於經驗豐富的程序員來說，這可能很清楚，但我對此很新，所以請耐心等待。親切的問候。 Chris – IRHM

嗨，只是想發佈一個更新，說我已經解決了這個問題。非常感謝您的時間和麻煩。親切的問候。 Chris – IRHM

@IRHM：我用一些代碼更新了我的答案。我不會爲你寫所有的東西，但希望現在能夠更有意義。另外：縮進你的代碼！當事情沒有正確縮進時，很難弄清楚什麼屬於什麼地方 – Flambino

LatLng界限顯示自定義標記

回答

相關問題