未捕获的类型错误：对象 #<Element> 没有方法“getPosition”

Question

我正在尝试在地图中显示可见标记，但无法使此代码正常工作。在控制台中，它会像我期望的那样显示标记信息。

<marker name="Jolly rogers", address="1850 Scales Bend Rd" lat="41.7609" lng="-91.6574" distance="217.212"></marker>

但我得到了错误：

未捕获的 TypeError: Object # has no method 'getPosition'

我有什么问题？

 function showVisibleMarkers() {
    for (var i = 0; i < markers.length; i++) {
      console.log(markers[i]);
      if (map.getBounds().contains(markers[i].getPosition())) {
        // code to display markers
      }
    }
  }

这是创建地图的代码。

function displaymap(lat, lng, state, min, max) {

    map = new google.maps.Map(document.getElementById("mapdiv"), {
      center: new google.maps.LatLng(lat, lng),
      zoom: 7,
      mapTypeId: 'roadmap',
      panControl: true,
      zoomControl: true,
      streetViewControl: true,
      mapTypeControl: true
    });

    var infoWindow = new google.maps.InfoWindow;
    // Change this depending on the name of your PHP file
    downloadUrl("/inc/db_query.php?lat=" + lat + "&lng=" + lng + "&state=" + state + "&min=" + min + "&max=" + max, function(data) {
      var xml = data.responseXML;
      var bounds = new google.maps.LatLngBounds();
      markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        if (markers[i].getAttribute("daily") === '') {
          var icon = '/img/blackdot.png';
        } else if (markers[i].getAttribute("daily") === 0) {
          var icon = '/img/greendot.png';
        } else if (markers[i].getAttribute("daily") > 0 && markers[i].getAttribute("daily") < 10) {
          var icon = '/img/bluedot.png';
        } else if (markers[i].getAttribute("daily") > 9 && markers[i].getAttribute("daily") < 20) {
          var icon = '/img/purpledot.png';
        } else if (markers[i].getAttribute("daily") > 19 && markers[i].getAttribute("daily") < 30) {
          var icon = '/img/reddot.png';
        } else if (markers[i].getAttribute("daily") > 29 && markers[i].getAttribute("daily") < 40) {
          var icon = '/img/orangedot.png';
        } else if (markers[i].getAttribute("daily") > 39 && markers[i].getAttribute("daily") < 50) {
          var icon = '/img/yellowdot.png';
        } else if (markers[i].getAttribute("daily") > 49) {
          var icon = '/img/whitedot.png';
        }
        var position = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> <br/>" + address;
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          icon: icon
        });
        bindInfoWindow(marker, map, infoWindow, html);
        bounds.extend(position);
        map.fitBounds(bounds);
      }
    });
    google.maps.event.addListener(map, 'idle', function() {
      showVisibleMarkers();
    });
  }

Answer 1

您不会保留对 google.maps.Marker 对象的引用。标记数组中的 XML“标记”元素没有 getPosition 方法（google.maps.Marker 对象有）。

var gmarkers = []; // in the global scope

function showVisibleMarkers() {
   for (var i = 0; i < gmarkers.length; i++) {
     // console.log(markers[i]);
     if (map.getBounds().contains(gmarkers[i].getPosition())) {
       // code to display markers
     }
   }
}

function displaymap(lat, lng, state, min, max) {
    map = new google.maps.Map(document.getElementById("mapdiv"), {
      center: new google.maps.LatLng(lat, lng),
      zoom: 7,
      mapTypeId: 'roadmap',
      panControl: true,
      zoomControl: true,
      streetViewControl: true,
      mapTypeControl: true
    });

    var infoWindow = new google.maps.InfoWindow;
    // Change this depending on the name of your PHP file
    downloadUrl("/inc/db_query.php?lat=" + lat + "&lng=" + lng + "&state=" + state + "&min=" + min + "&max=" + max, function(data) {
      var xml = data.responseXML;
      var bounds = new google.maps.LatLngBounds();
      markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        if (markers[i].getAttribute("daily") === '') {
          var icon = '/img/blackdot.png';
        } else if (markers[i].getAttribute("daily") === 0) {
          var icon = '/img/greendot.png';
        } else if (markers[i].getAttribute("daily") > 0 && markers[i].getAttribute("daily") < 10) {
          var icon = '/img/bluedot.png';
        } else if (markers[i].getAttribute("daily") > 9 && markers[i].getAttribute("daily") < 20) {
          var icon = '/img/purpledot.png';
        } else if (markers[i].getAttribute("daily") > 19 && markers[i].getAttribute("daily") < 30) {
          var icon = '/img/reddot.png';
        } else if (markers[i].getAttribute("daily") > 29 && markers[i].getAttribute("daily") < 40) {
          var icon = '/img/orangedot.png';
        } else if (markers[i].getAttribute("daily") > 39 && markers[i].getAttribute("daily") < 50) {
          var icon = '/img/yellowdot.png';
        } else if (markers[i].getAttribute("daily") > 49) {
          var icon = '/img/whitedot.png';
        }
        var position = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> <br/>" + address;
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          icon: icon
        });
        gmarkers.push(marker); // <---------------------------- add this line.
        bindInfoWindow(marker, map, infoWindow, html);
        bounds.extend(position);
        map.fitBounds(bounds);
      }
    });
    google.maps.event.addListener(map, 'idle', function() {
      showVisibleMarkers();
    });
  }