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界限显示自定义标记

回答

相关问题