单击按钮关闭标记

问题描述 投票：-1回答：1

帮帮我理解我通过从php文件中读取坐标来获取标记。我试图通过单击按钮来禁用标记（setMapOnAll（null）;）它不起作用，帮助我，我的错误在哪里。这是我的代码：

<body>
<div id="floating-panel">
<input onclick="clearMarkers();" type=button value="Remove line">
<input onclick="showMarkers();" type=button value="Restore line">
</div>
<div id="cities"></div>
<div id="map"></div>
    <script>
    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() {}

    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(55.8029212, 37.7898788),
        zoom: 14,
        fullscreenControl: false,
        streetViewControl: false,
      });
      var image = {
        tp1: {
          url: './image/tp1.png',
          scaledSize: new google.maps.Size(28, 40)
        },
        tp0: {
          url: './image/tp0.png',
          scaledSize: new google.maps.Size(28, 40)
        },
      };
      downloadUrl('phpsqlinfo_addrow.php', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var point = new google.maps.LatLng(
            parseFloat(markerElem.getAttribute('lat')),
            parseFloat(markerElem.getAttribute('lng')));
          var type = markerElem.getAttribute('type');
          var icon = image[type] || {};
          var marker = new google.maps.Marker({
            icon: icon,
            map: map,
            position: point,
          });
          markers.push(marker);
        });
      });
    }

    function setMapOnAll(map) {
      for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
      }
    }

    function clearMarkers() {
      setMapOnAll(null);
    }

    function showMarkerl() {
      setMapOnAll(map);
    }
 </script>

不要严格判断，我只是在学习。

google-maps-api-3
1个回答
0
投票

你的数组markers不包含google.maps.Marker对象。创建并使用google.maps.Markers数组（即gmarkers）：

function setMapOnAll(map) {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(map);
  }
}

gmarkers = [];

var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
  var point = new google.maps.LatLng(
    parseFloat(markerElem.getAttribute('lat')),
    parseFloat(markerElem.getAttribute('lng')));
  var type = markerElem.getAttribute('type');
  var icon = image[type] || {};              
  var marker = new google.maps.Marker({
    icon: icon,
    map: map,
    position: point,
  });
  gmarkers.push(marker);
});

proof of concept fiddle

代码段：

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 gmarkers = [];
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(55.8029212, 37.7898788),
    zoom: 14,
    fullscreenControl: false,
    streetViewControl: false,
  });
  var image = {
    tp1: {
      url: './image/tp1.png',
      scaledSize: new google.maps.Size(28, 40)
    },
    tp0: {
      url: './image/tp0.png',
      scaledSize: new google.maps.Size(28, 40)
    },
  };
  // downloadUrl('phpsqlinfo_addrow.php', function(data) {
  // var xml = data.responseXML;
  var xml = xmlParse(xmlStr);
  var markers = xml.documentElement.getElementsByTagName('marker');
  Array.prototype.forEach.call(markers, function(markerElem) {
    var point = new google.maps.LatLng(
      parseFloat(markerElem.getAttribute('lat')),
      parseFloat(markerElem.getAttribute('lng')));
    var type = markerElem.getAttribute('type');
    // var icon = image[type] || {};              
    var marker = new google.maps.Marker({
      // icon: icon,
      map: map,
      position: point,
    });
    gmarkers.push(marker);
  });
  //  });
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', clearMarkers);
  google.maps.event.addDomListener(document.getElementById('show'), 'click', showMarkers);
}

function setMapOnAll(map) {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(map);
  }
}

function clearMarkers() {
  setMapOnAll(null);
}

function showMarkers() {
  setMapOnAll(map);
}

function xmlParse(str) {
  if ((typeof ActiveXObject != 'undefined') || ("ActiveXObject" in window)) {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

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

  return document.createElement('div', null);
}
var xmlStr = '<markers><marker lat="55.8029212" lng="37.7898788" type="something" /></markers>'
html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: white;
}
<input id="btn" type="button" value="clear" /><input id="show" type="button" value="show" />
<div id='map'></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap"></script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.