Question

我正在尝试根据我正在喂食的GeoJSON位置数据加载带有几个标记的基本地图。能够使地图和标记启动并运行。我的目的是让地图保持不变，并在setInterval持续时间内提到的持续时间内重绘标记和圆形对象。

问题是我无法重新绘制标记。我尝试使用setMap(NULL)删除标记，因此每次一次又一次地绘制标记时都会加载地图。

调试显示，即使将标记推送到数组中，数组中定义的gmarkers()长度也不会增加。

包括代码，

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    html {
      height: 100%
    }
    body {
      height: 100%;
      margin: 0;
      padding: 0
    }
    #map-canvas {
      height: 100%
    }
  </style>

  <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization&callback=initialize" async defer></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="csv2geojson.js"></script>
  <script>
    var map;
     // Set a blank infoWindow to be used for each to state on click
    var infoWindow;

    var circle;
    var marker;
    var callback_results;
    var gmarkers = [];

    function initialize() {
      var mapOptions = {
        zoom: 4,
        scrollwheel: false,
        center: new google.maps.LatLng(40.00, -98),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
        }
      }

      var mapCanvas = document.getElementById('map-canvas');
      map = new google.maps.Map(mapCanvas, mapOptions);

      infoWindow = new google.maps.InfoWindow({
        content: ""
      });

      var script = document.createElement('script');
      script.src = 'https://gist.githubusercontent.com/anonymous/b3d22cade31083355464/raw/e1c9183c1b2e3eb068cd482281e85d82f68b9cfb/ari.json';
      document.getElementsByTagName('head')[0].appendChild(script);
    }

     // Loop through the results array and place a circle for each
     // set of coordinates.
    window.eqfeed_callback = function(results) {

      callback_results = results;
      map.data.addGeoJson(results);
      draw();

    }

    function draw() {
      //var heatmapData = [];

      for (var i = 0; i < callback_results.features.length; i++) {
        var score = callback_results.features[i].properties.COLI;
        var coords = callback_results.features[i].geometry.coordinates;
        var latLng = new google.maps.LatLng(coords[1], coords[0]);

        //heatmapData.push(latLng);

        /*
            var weightedLoc = {
 location: latLng,
 weight: Math.pow(2, magnitude)
 };
 heatmapData.push(weightedLoc);
          */

        var circleopts = {
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          center: latLng,
          radius: 100000
        };
        circle = new google.maps.Circle(circleopts);

        var markeropts = {
          position: latLng,
          map: map
        };


        marker = new google.maps.Marker({
          position: latLng,
          map: map
        });
        //console.log(marker);
        gmarkers.push(marker);


        /*
           var heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapData,
        dissipating: false,
        map: map
        });
         */

      }

      // Adds an info window on click with in a state that includes the state name and COLI
      map.data.addListener('click', function(e) {
        console.log(e);
        infoWindow.setContent('<div style="line-height:1.00;overflow:hidden;white-space:nowrap;">' +
          e.feature.getProperty('NAME') + '<br> COLI: ' +
          e.feature.getProperty('COLI') + '</div>');

        var anchor = new google.maps.MVCObject();
        anchor.set("position", e.latLng);
        infoWindow.open(map, anchor);
      });


    }

     // Sets the map on all markers in the array.
    function setMapOnAll(map) {
      //console.log("WTF is happening");
      for (var i = 0; i < gmarkers.length; i++) {
        console.log("WTF is happening");
        gmarkers[i].setMap(map);
      }
    }

     // Removes the markers from the map, but keeps them in the array.
    function clearMarkers() {

      setMapOnAll(null);
    }

     // Shows any markers currently in the array.
    function showMarkers() {
      setMapOnAll(map);
    }

     // Deletes all markers in the array by removing references to them.
    function deleteMarkers() {
      clearMarkers();
      gmarkers = [];
    }


    clearMarkers();
    /*
       for (i = 0; i < markerArray.length; i++) {
       marker.setVisible(false);
       markerArray[i].setMap(null);
       }       */
     //setInterval(clearOverlays, 3000);
     //setInterval(deleteOverlays, 4000);
    setInterval(draw, 5000);
  </script>
</head>

<body>
  <div id="map-canvas"></div>
</body>

</html>

Geo Json在后端使用的坐标。

eqfeed_callback({"type":"FeatureCollection","features":[
{
"type":"Feature",
"properties":{"GEO_ID":"0400000US04","STATE":"04","NAME":"Arizona","LSAD":"","CENSUSAREA":113594.084,"ABVR":"AZ","COLI":103.94696969696945},
"geometry":{"type":"Point","coordinates":[-112.538593,37.000674]}},
{
"type":"Feature",
"properties":{"GEO_ID":"0400000US05","STATE":"05","NAME":"Arkansas","LSAD":"","CENSUSAREA":52035.477,"ABVR":"AR","COLI":93.15411931818184},
"geometry":{"type":"Point","coordinates":[-94.042964,33.019219]}}
]})

Answer 1

添加/删除标记工作正常，但您在此处设置了其他图层：

map.data.addGeoJson(results);

注释掉并添加/删除标记。

看起来这些添加标记的方法之一是多余的，选择哪一个：）

工作小提琴：http://jsfiddle.net/p7ztm8hh/6/

谷歌地图push（）标记到标记数组不会增加数组长度

1 个答案: