Обновление/удаление маркеров в API Карт Google

Я показываю Карты Google с местоположением текущего пользователя на своем веб-сайте (тогда я добавлю другие функции) с помощью маркера. Я могу это сделать: каждый раз, когда пользователь перемещается, в новую позицию пользователя на карте добавляется другой маркер, но предыдущий маркер не удаляется, поэтому я добавляю все больше и больше маркеров, и я могу " t удалите предыдущий, прежде чем обновлять позицию пользователя. Я попытался использовать таймеры и другие стратегии без успеха: marker.setVisible (false), marker.setMap (null).Обновление/удаление маркеров в API Карт Google

Код:

<!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>

источник

2015-11-09 Eu Román

Во-первых, его 'marker.setMap (нуль);', убедитесь, что вы читаете документацию * тщательно * перед публикацией здесь , –

Спасибо, ты прав, но это была опечатка. Конечно, я использовал marker.setMap (null). Я исправил этот пост. –

Определить переменный маркера в глобальной области (где вы определяете вашу 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!" 
    }); 
}

фрагмент кода:

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">

источник

2015-11-09 02:49:29 geocodezip

Wow, geocodezip, вы сделали это! Большое вам спасибо, вы только что сделали мой день! Это решило мою проблему, и теперь это работает потрясающе. Я вам задолжаю! –

После 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 = []; 
     }

источник

2015-11-09 01:39:19

Большое спасибо господину Нео! Хорошо, теперь я вставил эти 4 функции внутри скрипта моего кода. Теперь я должен вызвать deleteMarkers() в массиве маркеров. Однако позиция пользователя - это не массив маркеров, а только один маркер. Поэтому я должен создать массив маркеров только с одной позицией (маркер), и я должен сделать arrayOfMarkers.deleteMarkers(), правильно? Где я должен выполнить это действие? Еще раз спасибо! –

Обновление/удаление маркеров в API Карт Google

ответ

Смежные вопросы