如何在html中编辑/删除谷歌地图中的标记

时间：2015-05-09 23:18:11

标签： google-maps geolocation

我有一个html页面，显示谷歌地图的地址点。 我的地理位置将每20秒刷新一次，我想删除旧位置并标记新的地理位置： 我的html和java脚本代码是：

 <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
  var markers = [];
  var locations = [
    ['<h4>Bondi Beach</h4>', -33.890542, 151.274856],
    ['<h4>Coogee Beach</h4>', -33.923036, 151.259052],
    ['<h4>Cronulla Beach</h4>', -34.028249, 151.157507],
    ['<h4>Manly Beach</h4>', -33.80010128657071, 151.28747820854187],
    ['<h4>Maroubra Beach</h4>', -33.950198, 151.259302]
  ];
  var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
  var icons = [
    iconURLPrefix + 'red-dot.png',
    iconURLPrefix + 'green-dot.png',
    iconURLPrefix + 'blue-dot.png',
    iconURLPrefix + 'orange-dot.png',
    iconURLPrefix + 'purple-dot.png',
    iconURLPrefix + 'pink-dot.png',
    iconURLPrefix + 'yellow-dot.png'
  ]
  var iconsLength = icons.length;

  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-37.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      panControl: false,
      zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT_BOTTOM
      }
  });
  var infowindow = new google.maps.InfoWindow({
      maxWidth: 160
  });
  var iconCounter = 0;
  for (var i = 0; i < locations.length; i++) {
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          icon: icons[iconCounter]
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function (marker, i) {
          return function () {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
          }
      })(marker, i));

      iconCounter++;
      if (iconCounter >= iconsLength) {
          iconCounter = 0;
      }
  }

  function autoCenter() {
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < markers.length; i++) {
          bounds.extend(markers[i].position);
      }
      map.fitBounds(bounds);
  }
  autoCenter();
  ///////////////////////////////////////////////////////
  setInterval(function () {
      markers = null;
      locations = [
        ['<h4>Bondi Beach</h4>', -34.890542, 151.274856],
        ['<h4>Coogee Beach</h4>', -33.923036, 151.259052],
        ['<h4>Cronulla Beach</h4>', -34.028249, 151.157507],
        ['<h4>Manly Beach</h4>', -33.80010128657071, 151.28747820854187],
        ['<h4>Maroubra Beach</h4>', -33.950198, 151.259302]
      ];
      icons = [
        iconURLPrefix + 'red-dot.png',
        iconURLPrefix + 'green-dot.png',
        iconURLPrefix + 'blue-dot.png',
        iconURLPrefix + 'orange-dot.png',
        iconURLPrefix + 'purple-dot.png',
        iconURLPrefix + 'pink-dot.png',
        iconURLPrefix + 'yellow-dot.png'
      ];
      iconsLength = icons.length;

      ///////////////////////////////////////////////////
      for (var i = 0; i < locations.length; i++) {
          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i][1], locations[i][2]),
              map: map,
              icon: icons[iconCounter]
          });
          markers.push(marker);
          google.maps.event.addListener(marker, 'click', (function (marker, i) {
              return function () {
                  infowindow.setContent(locations[i][0]);
                  infowindow.open(map, marker);
              }
          })(marker, i));
          iconCounter++;
          if (iconCounter >= iconsLength) {
              iconCounter = 0;
          }
      }
  }, 20000);

1 个答案:

答案 0 :(得分：0)

我的代码Uncaught TypeError: Cannot read property 'push' of null出现javascript错误。您将标记数组设置为null，之后您无法在其上推送新标记。

修复该问题。要删除标记，请遍历该数组，在每个标记上调用.setMap（null）将其从地图中删除，然后将数组设置为空（markers = [];）。

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

proof of concept fiddle

代码段：

var markers = [];
var map;
var locations = [
  ['<h4>Bondi Beach</h4>', -33.890542, 151.274856],
  ['<h4>Coogee Beach</h4>', -33.923036, 151.259052],
  ['<h4>Cronulla Beach</h4>', -34.028249, 151.157507],
  ['<h4>Manly Beach</h4>', -33.80010128657071, 151.28747820854187],
  ['<h4>Maroubra Beach</h4>', -33.950198, 151.259302]
];
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
var icons = [
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'blue-dot.png',
  iconURLPrefix + 'orange-dot.png',
  iconURLPrefix + 'purple-dot.png',
  iconURLPrefix + 'pink-dot.png',
  iconURLPrefix + 'yellow-dot.png'
]
var iconsLength = icons.length;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-37.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
    }
  });
  var infowindow = new google.maps.InfoWindow({
    maxWidth: 160
  });
  var iconCounter = 0;
  for (var i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      title: "orig",
      icon: icons[iconCounter]
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));

    iconCounter++;
    if (iconCounter >= iconsLength) {
      iconCounter = 0;
    }
  }
  autoCenter();
  ///////////////////////////////////////////////////////
  setInterval(function() {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    markers = [];
    locations = [
      ['<h4>Bondi Beach</h4>', -34.890542, 151.274856],
      ['<h4>Coogee Beach</h4>', -33.923036, 151.259052],
      ['<h4>Cronulla Beach</h4>', -34.028249, 151.157507],
      ['<h4>Manly Beach</h4>', -33.80010128657071, 151.28747820854187],
      ['<h4>Maroubra Beach</h4>', -33.950198, 151.259302]
    ];
    icons = [
      iconURLPrefix + 'red-dot.png',
      iconURLPrefix + 'green-dot.png',
      iconURLPrefix + 'blue-dot.png',
      iconURLPrefix + 'orange-dot.png',
      iconURLPrefix + 'purple-dot.png',
      iconURLPrefix + 'pink-dot.png',
      iconURLPrefix + 'yellow-dot.png'
    ];
    iconsLength = icons.length;

    ///////////////////////////////////////////////////
    for (var i = 0; i < locations.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
      });
      markers.push(marker);
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      iconCounter++;
      if (iconCounter >= iconsLength) {
        iconCounter = 0;
      }
    }
  }, 20000);

}
google.maps.event.addDomListener(window, 'load', initialize);

function autoCenter() {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].position);
  }
  map.fitBounds(bounds);
}
html,
body,
#map {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>

相关问题
最新问题