Question

我使用标记在我的网站上显示当前用户位置的谷歌地图（然后，我将添加其他功能）。我能够做到这一点：每次用户移动时，另一个标记就会插入用户在地图上的新位置，但之前的标记不会被删除，所以我添加了越来越多的标记在刷新用户位置之前，我无法删除上一个。我试图使用计时器和其他策略但没有成功：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>

Answer 1

关注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 = [];
        }

Answer 2

在全局范围内定义标记变量（您定义try: thing_limit = int(thing_limit) except ValueError: print("You need a whole number.") sys.exit() else: print("That is a number, thanks.")变量的位置），如果标记已存在，则移动它，否则创建它。

map

代码段

＆＃13;

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!"
    });
}

＆＃13;

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);

＆＃13;

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

＆＃13;

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

2 个答案: