并非所有标记都显示在Google地图上

时间：2016-04-12 18:46:54

标签： javascript google-maps google-maps-api-3 google-maps-markers

我正在尝试在Google地图上显示标记，但是会显示一些标记，而某些标记则不会显示。我试过不同的浏览器，如谷歌浏览器和Firefox，但它没有帮助。

这是我的JavaScript代码。

<script type="text/javascript">
//<![CDATA[
var customIcons = {
  icons: {
    default:{
    normal: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    selected: '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(40.8833, 260.0167),
    zoom: 5,
    mapTypeId: 'roadmap'
  });
var infoWindow = new google.maps.InfoWindow;
  // Change this depending on the name of your PHP file
  downloadUrl("ip_maps.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var ip_address = markers[i].getAttribute("ip_address");
      var city_location = markers[i].getAttribute("city_location");
      var isp = markers[i].getAttribute("isp");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + ip_address + "</b>" +",\n" + city_location +",\n"  + isp;
      var icon = customIcons[isp] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}
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>

我从这里得到了这段代码https://developers.google.com/maps/articles/phpsqlajax_v3。 经过不同的线程后，我了解到这可能是因为over_query_limit而发生的。

这就是我的PostgreSQL数据库的外观

 id |   ip_address    |    city_location     |   lat    |    lng    |                          isp                         
   1 | 74.125.0.0      | Mountain View        | 37.4192  | -122.0574 |  Google
   2 | 23.192.0.0      | Cambridge            | 42.3626  | -71.0843  | Akamai Technologies
   3 | 128.206.0.0     | Columbia             | 38.9033  | -92.1022  | University of Missouri-Columbia
   4 | 207.160.0.0     | Columbia             | 38.8817  | -92.402   | University of Missouri - dba the Missouri Research
   5 | 96.6.0.0        | Amsterdam            | 52.35    | 4.9167    | Akamai Technologies
   6 | 93.0.0.0        | Charleville-mézières | 49.7667  | 4.7167    | SFR
   7 | 89.0.0.0        | Aachen               | 50.7884  | 6.1044    | NetCologne GmbH
   8 | 72.246.0.0      | Boston               | 42.366   | -71.123   | Akamai Technologies
   9 | 69.171.224.0    | Menlo Park           | 37.459   | -122.1781 | Facebook
  10 | 68.80.0.0       | New Castle           | 39.6387  | -75.6195  | Comcast Cable
  11 | 54.241.191.192  | San Jose             | 37.3394  | -121.895  | Amazon Technologies
  12 | 54.208.0.0      | Ashburn              | 39.0335  | -77.4838  | Amazon Technologies
  13 | 54.160.0.0      | Ashburn              | 39.0335  | -77.4838  | Amazon
  14 | 50.16.0.0       | Ashburn              | 39.0335  | -77.4838  | Amazon.com
  15 | 31.0.0.0        |  Unknown             | 52.2333  | 21.0167   | Polkomtel Sp. z o.o.
  16 | 23.234.16.0     | Rowland Heights      | 33.9782  | -117.904  | Defender cloud international llc
  17 | 23.0.0.0        | Cambridge            | 42.3626  | -71.0843  | Akamai Technologies
  18 | 216.115.96.0    | Sunnyvale            | 37.4249  | -122.0074 | Yahoo!
  19 | 205.185.206.128 | Chicago              | 41.8471  | -87.6248  | Highwinds Network Group
  20 | 198.71.44.0     | Ann Arbor            | 42.2734  | -83.7133  | Internet2
  21 | 198.209.0.0     | Columbia             | 38.8817  | -92.402   | University of Missouri - dba the Missouri Research
  22 | 187.0.0.0       | Nova Prata           | -28.7833 | -51.6     | Adylnet Acesso A internet Ltda
  23 | 184.169.128.0   | San Jose             | 37.3394  | -121.895  | Amazon.com
  24 | 173.192.0.0     | Dallas               | 32.7831  | -96.8067  | SoftLayer Technologies
  25 | 157.60.0.0      | Redmond              | 47.6801  | -122.1206 | Microsoft Corporation
  26 | 157.56.0.0      | Redmond              | 47.6801  | -122.1206 | Microsoft bingbot
  27 | 157.54.0.0      | Redmond              | 47.6801  | -122.1206 | Microsoft Corporation
  28 | 129.237.0.0     | Lawrence             | 38.9525  | -95.2756  | University of Kansas

显示的标记是id = 1,3,4,5,6,7,9,10,14,15,16,17,18,19,20,22,23,24,27， 28，未显示的标记是id = 2,8,11,12,13,21,25,26。

这是.xml文件

  <markers>
<marker ip_address="74.125.0.0" city_location="Mountain View" lat="37.4192" lng="-122.0574" isp="Google"/>
<marker ip_address="23.192.0.0" city_location="Cambridge" lat="42.3626" lng="-71.0843" isp="Akamai Technologies"/>
<marker ip_address="128.206.0.0" city_location="Columbia" lat="38.9033" lng="-92.1022" isp="University of Missouri-Columbia"/>
<marker ip_address="207.160.0.0" city_location="Columbia" lat="38.8817" lng="-92.402" isp="University of Missouri - dba the Missouri Research"/>
<marker ip_address="96.6.0.0" city_location="Amsterdam" lat="52.35" lng="4.9167" isp="Akamai Technologies"/>
<marker ip_address="93.0.0.0" city_location="Charleville-mézières" lat="49.7667" lng="4.7167" isp="SFR"/>
<marker ip_address="89.0.0.0" city_location="Aachen" lat="50.7884" lng="6.1044" isp="NetCologne GmbH"/>
<marker ip_address="72.246.0.0" city_location="Boston" lat="42.366" lng="-71.123" isp="Akamai Technologies"/>
<marker ip_address="69.171.224.0" city_location="Menlo Park" lat="37.459" lng="-122.1781" isp="Facebook"/>
<marker ip_address="68.80.0.0" city_location="New Castle" lat="39.6387" lng="-75.6195" isp="Comcast Cable"/>
<marker ip_address="54.241.191.192" city_location="San Jose" lat="37.3394" lng="-121.895" isp="Amazon Technologies"/>
<marker ip_address="54.208.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon Technologies"/>
<marker ip_address="54.160.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon"/>
<marker ip_address="50.16.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon.com"/>
<marker ip_address="31.0.0.0" city_location=" Unknown" lat="52.2333" lng="21.0167" isp="Polkomtel Sp. z o.o."/>
<marker ip_address="23.234.16.0" city_location="Rowland Heights" lat="33.9782" lng="-117.904" isp="Defender cloud international llc"/>
<marker ip_address="23.0.0.0" city_location="Cambridge" lat="42.3626" lng="-71.0843" isp="Akamai Technologies"/>
<marker ip_address="216.115.96.0" city_location="Sunnyvale" lat="37.4249" lng="-122.0074" isp="Yahoo!"/>
<marker ip_address="205.185.206.128" city_location="Chicago" lat="41.8471" lng="-87.6248" isp="Highwinds Network Group"/>
<marker ip_address="198.71.44.0" city_location="Ann Arbor" lat="42.2734" lng="-83.7133" isp="Internet2"/>
<marker ip_address="198.209.0.0" city_location="Columbia" lat="38.8817" lng="-92.402" isp="University of Missouri - dba the Missouri Research"/>
<marker ip_address="187.0.0.0" city_location="Nova Prata" lat="-28.7833" lng="-51.6" isp="Adylnet Acesso A internet Ltda"/>
 <marker ip_address="184.169.128.0" city_location="San Jose" lat="37.3394" lng="-121.895" isp="Amazon.com"/>
 <marker ip_address="173.192.0.0" city_location="Dallas" lat="32.7831" lng="-96.8067" isp="SoftLayer Technologies"/>
 <marker ip_address="157.60.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft Corporation"/>
 <marker ip_address="157.56.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft bingbot"/>
<marker ip_address="157.54.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft Corporation"/>
 <marker ip_address="129.237.0.0" city_location="Lawrence" lat="38.9525" lng="-95.2756" isp="University of Kansas"/>
 </markers>

这是我的.php文件

 <?php
 ini_set('display_errors', 1);
 //phppsql_genxml.php

 function parseToXML($htmlStr)
 {
 $xmlStr=str_replace('<','&lt;',$htmlStr);
 $xmlStr=str_replace('>','&gt;',$xmlStr);
 $xmlStr=str_replace('"','&quot;',$xmlStr);
 $xmlStr=str_replace("'",'&#39;',$xmlStr);
 $xmlStr=str_replace("&",'&amp;',$xmlStr);
 return $xmlStr;
 }

 $dbh = pg_connect("host=localhost port=5432 dbname=ip_database user=postgres password=something");
 if (!$dbh) {
 die("Error in connection: " . pg_last_error());
  }

  // execute query

 $sql = "SELECT ip_address, city_location, lat, lng, isp FROM  markers";
 $result = pg_query($dbh, $sql);
 if (!$result) {

 die("Error in SQL query: " . pg_last_error());
  }

 header("Content-type: text/xml");

   // Start XML file, echo parent node
   echo '<markers>';

    // Iterate through the rows, printing XML nodes for each
       while ($row = pg_fetch_array($result)){
     // ADD TO XML DOCUMENT NODE
     echo '<marker ';
     echo 'ip_address="' . parseToXML($row['ip_address']) . '" ';                               

     echo 'city_location="' . parseToXML($row['city_location']) . '"   ';
     echo 'lat="' . $row['lat'] . '" ';
     echo 'lng="' . $row['lng'] . '" ';
         echo 'isp="' . parseToXML($row['isp']) . '" ';
     echo '/>';
     }
    // End XML file
    echo '</markers>';
      ?>

一切正常，除了28个标记中只有8个如上所述显示。我如何解决这个问题？我想显示大量的标记。

任何有关此的帮助将不胜感激。谢谢

1 个答案:

答案 0 :(得分：1)

您的“缺失”标记是重复的（顶部还有其他标记）。

代码段 

var customIcons = {
  icons: {
    default: {
      normal: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
      selected: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    }
  }
};
var gmarkers = [];

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(40.8833, 260.0167),
    zoom: 5,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;
  // Change this depending on the name of your PHP file
  // downloadUrl("ip_maps.php", function(data) {
  // var xml = data.responseXML;
  var xml = xmlParse(xmlStr);
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  document.getElementById('info').innerHTML = "markers.length=" + markers.length;
  for (var i = 0; i < markers.length; i++) {
    var ip_address = markers[i].getAttribute("ip_address");
    var city_location = markers[i].getAttribute("city_location");
    var isp = markers[i].getAttribute("isp");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    bounds.extend(point);
    var html = "<b>" + ip_address + "</b>" + ",\n" + city_location + ",\n" + isp;
    var icon = customIcons[isp] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon,
      shadow: icon.shadow
    });
    bindInfoWindow(marker, map, infoWindow, html);
    document.getElementById('sidebar').innerHTML += "<a href='javascript:myclick(" + i + ");'>marker " + (i+1) + "</a><br>";
    for (var j = 0; j < gmarkers.length; j++) {
      if (point.equals(gmarkers[j].getPosition())) {
        document.getElementById('sidebar').innerHTML += "(duplicate of " + (j+1) + ")";
        break;
      }
    }
    document.getElementById('sidebar').innerHTML += "<br>";
    gmarkers.push(marker);
  }
  map.fitBounds(bounds);
  // });
}

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], 'click');
}

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() {}

var xmlStr = '<markers><marker ip_address="74.125.0.0" city_location="Mountain View" lat="37.4192" lng="-122.0574" isp="Google"/><marker ip_address="23.192.0.0" city_location="Cambridge" lat="42.3626" lng="-71.0843" isp="Akamai Technologies"/><marker ip_address="128.206.0.0" city_location="Columbia" lat="38.9033" lng="-92.1022" isp="University of Missouri-Columbia"/><marker ip_address="207.160.0.0" city_location="Columbia" lat="38.8817" lng="-92.402" isp="University of Missouri - dba the Missouri Research"/><marker ip_address="96.6.0.0" city_location="Amsterdam" lat="52.35" lng="4.9167" isp="Akamai Technologies"/><marker ip_address="93.0.0.0" city_location="Charleville-mézières" lat="49.7667" lng="4.7167" isp="SFR"/><marker ip_address="89.0.0.0" city_location="Aachen" lat="50.7884" lng="6.1044" isp="NetCologne GmbH"/><marker ip_address="72.246.0.0" city_location="Boston" lat="42.366" lng="-71.123" isp="Akamai Technologies"/><marker ip_address="69.171.224.0" city_location="Menlo Park" lat="37.459" lng="-122.1781" isp="Facebook"/><marker ip_address="68.80.0.0" city_location="New Castle" lat="39.6387" lng="-75.6195" isp="Comcast Cable"/><marker ip_address="54.241.191.192" city_location="San Jose" lat="37.3394" lng="-121.895" isp="Amazon Technologies"/><marker ip_address="54.208.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon Technologies"/><marker ip_address="54.160.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon"/><marker ip_address="50.16.0.0" city_location="Ashburn" lat="39.0335" lng="-77.4838" isp="Amazon.com"/><marker ip_address="31.0.0.0" city_location=" Unknown" lat="52.2333" lng="21.0167" isp="Polkomtel Sp. z o.o."/><marker ip_address="23.234.16.0" city_location="Rowland Heights" lat="33.9782" lng="-117.904" isp="Defender cloud international llc"/><marker ip_address="23.0.0.0" city_location="Cambridge" lat="42.3626" lng="-71.0843" isp="Akamai Technologies"/><marker ip_address="216.115.96.0" city_location="Sunnyvale" lat="37.4249" lng="-122.0074" isp="Yahoo!"/><marker ip_address="205.185.206.128" city_location="Chicago" lat="41.8471" lng="-87.6248" isp="Highwinds Network Group"/><marker ip_address="198.71.44.0" city_location="Ann Arbor" lat="42.2734" lng="-83.7133" isp="Internet2"/><marker ip_address="198.209.0.0" city_location="Columbia" lat="38.8817" lng="-92.402" isp="University of Missouri - dba the Missouri Research"/><marker ip_address="187.0.0.0" city_location="Nova Prata" lat="-28.7833" lng="-51.6" isp="Adylnet Acesso A internet Ltda"/> <marker ip_address="184.169.128.0" city_location="San Jose" lat="37.3394" lng="-121.895" isp="Amazon.com"/> <marker ip_address="173.192.0.0" city_location="Dallas" lat="32.7831" lng="-96.8067" isp="SoftLayer Technologies"/> <marker ip_address="157.60.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft Corporation"/> <marker ip_address="157.56.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft bingbot"/><marker ip_address="157.54.0.0" city_location="Redmond" lat="47.6801" lng="-122.1206" isp="Microsoft Corporation"/> <marker ip_address="129.237.0.0" city_location="Lawrence" lat="38.9525" lng="-95.2756" isp="University of Kansas"/> </markers>';

google.maps.event.addDomListener(window, "load", load);

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#sidebar {
  -webkit-columns: 150px 4;
  -moz-columns: 150px 4;
  columns: 150px 4;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="sidebar"></div>
<div id="map"></div>

相关问题
最新问题