刷新/删除 Google Maps API 上的标记答案

【问题标题】：Refreshing/deleting markers on Google Maps API刷新/删除 Google Maps API 上的标记
【发布时间】：2015-11-09 01:33:19
【问题描述】：

我正在使用标记在我的网站上显示带有当前用户位置的 Google 地图（然后，我将添加其他功能）。我能够做到：每次用户移动时，都会在用户在地图上的新位置上插入另一个标记，但不会删除前一个标记，所以我要添加越来越多的标记，我可以' t 在刷新用户位置之前删除前一个。我尝试使用计时器和其他策略但没有成功：marker.setVisible(false)、marker.setMap(null)。

代码：

<!DOCTYPE html>
<html>

  <head>

    <title>Geolocation</title>

    <style>
      body,html {height:100%}
      #map {width:100%;height:100%;}
    </style>

    <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

    <script>  
      var map;

      function initGeolocation() {
        if (navigator && navigator.geolocation) {

        var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, {enableHighAccuracy:true,timeout:5000,maximumAge:0});

        } else {
          console.log('Geolocation not suported');
        }
      }

      function errorCallback() {}

      function successCallback(position) {
        var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        if(map == undefined) {
          var myOptions = {
            zoom: 18,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          map = new google.maps.Map(document.getElementById("map"), myOptions);
        }

        else map.panTo(myLatlng);

        markerUser = new google.maps.Marker({
          position: myLatlng,
          map: map,
          icon: 'img/iconFox.png',
          title:"You're here!"
        });        
    }
    </script>

  </head>
  <body onload="javascript:initGeolocation()">
    <div id="map">
    </div>    
  </body>

</html>

【问题讨论】：

首先是marker.setMap(null);，请确保您在发帖之前彻底阅读了文档。
谢谢你，你是对的，但这是一个错字。当然，我使用了marker.setMap(null)。我已经更正了帖子。

标签： javascript html google-maps

【解决方案1】：

在全局范围（定义map 变量）中定义标记变量，如果标记已经存在，则移动它，否则，创建它。

if (markerUser && markerUser.setPosition) {
    // marker exists, move it
    markerUser.setPosition(myLatlng);
} else { // create the marker
    markerUser = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: 'img/iconFox.png',
        title: "You're here!"
    });
}

代码 sn-p：

var map;
var markerUser;

function initGeolocation() {
  if (navigator && navigator.geolocation) {

    var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    });

  } else {
    console.log('Geolocation not suported');
  }
}

function errorCallback() {}

function successCallback(position) {
  var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  if (map == undefined) {
    var myOptions = {
      zoom: 18,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
  } else map.panTo(myLatlng);
  if (markerUser && markerUser.setPosition) {
    // marker exists, move it
    markerUser.setPosition(myLatlng);
  } else { // create the marker
    markerUser = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png',
      title: "You're here!"
    });
  }
}
google.maps.event.addDomListener(window, 'load', initGeolocation);

body,
html {
  height: 100%
}
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">

【讨论】：

你的 cmets 应该是一个新问题。

【解决方案2】：

关注tutorial from Google Map JavaScript API。您应该根据需要为add、remove 标记创建函数：

        //Create array of markers as global variable
        var markers = [];

        //And when you add marker onto your map, you push them into array
        markerUser = new google.maps.Marker({
          position: myLatlng,
          map: map,
          icon: 'img/iconFox.png',
          title:"You're here!"
        });
        markers.push(markerUser);

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

        // Removes the markers from the map, but keeps them in the array. It will hide all markers.
        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();
          markers = [];
        }

【讨论】：

非常感谢尼奥先生！好的，现在我已经在我的代码脚本中插入了这 4 个函数。现在我必须在一组标记上调用 deleteMarkers()。但是，用户的位置不是标记数组，总线只是一个标记。所以我应该创建一个只有一个位置（标记）的标记数组，我应该做 arrayOfMarkers.deleteMarkers()，对吧？我应该在哪里执行该操作？再次感谢！