Kullanıcıların google harita üzerinde güncel konumlarını görüntüleme ve güncelleme

Question

Şu an için, Google haritamızı tercih ettiğim konumda ortalanmış küçük bir programa sahibim. Kullanıcı bu konumda olacak, ancak sürekli olarak güncellenmekte olan kullanıcı konumu üzerinde bir işaretçi olmak istiyorum, böylece onlar hareket ettikçe harita ile nerede olduklarını görebilirler. Google maps uygulamasında olduğu gibi aynı logoyu, ok içeren mavi daireyi elde etmeyi hedefliyorum. Herhangi bir yardım takdir edilir.

Teşekkür

JavaScript - Kod harita bindirme için google geliştirici sayfasından alınır, ben bindirme bölüm şu anda kaldırılmış olması ancak harita iyi çalışıyor.

<script> 
// This example creates a custom overlay called USGSOverlay, containing 
// a U.S. Geological Survey (USGS) image of the relevant area on the map. 

// Set the custom overlay object's prototype to a new instance 
// of OverlayView. In effect, this will subclass the overlay class therefore 
// it's simpler to load the API synchronously, using 
// google.maps.event.addDomListener(). 
// Note that we set the prototype to an instance, rather than the 
// parent class itself, because we do not wish to modify the parent class. 

var overlay; 
USGSOverlay.prototype = new google.maps.OverlayView(); 

// Initialize the map and the custom overlay. 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 16, 
     center: { 
      lat: 43.4678683, 
      lng: -79.7006069 
     }, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }); 

    var bounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(43.46344509, -79.70671354), 
     new google.maps.LatLng(43.47341076, -79.69298207)); 


} 

/** @constructor */ 
function USGSOverlay(bounds, image, map) { 

    // Initialize all properties. 
    this.bounds_ = bounds; 
    this.image_ = image; 
    this.map_ = map; 

    // Define a property to hold the image's div. We'll 

    // actually create this div upon receipt of the onAdd() 
    // method so we'll leave it null for now. 
    this.div_ = null; 

    // Explicitly call setMap on this overlay. 
    this.setMap(map); 
} 


/** 
* onAdd is called when the map's panes are ready and the overlay has been 
* added to the map. 
*/ 
USGSOverlay.prototype.onAdd = function() { 

    var div = document.createElement('div'); 
    div.style.borderStyle = 'none'; 
    div.style.borderWidth = '0px'; 
    div.style.position = 'absolute'; 

    // Create the img element and attach it to the div. 
    var img = document.createElement('img'); 
    img.src = this.image_; 
    img.style.width = '100%'; 
    img.style.height = '100%'; 
    img.style.position = 'absolute'; 
    div.appendChild(img); 

    this.div_ = div; 

    // Add the element to the "overlayLayer" pane. 
    var panes = this.getPanes(); 
    panes.overlayLayer.appendChild(div); 
}; 

USGSOverlay.prototype.draw = function() { 

    // We use the south-west and north-east 
    // coordinates of the overlay to peg it to the correct position and size. 
    // To do this, we need to retrieve the projection from the overlay. 
    var overlayProjection = this.getProjection(); 

    // Retrieve the south-west and north-east coordinates of this overlay 
    // in LatLngs and convert them to pixel coordinates. 
    // We'll use these coordinates to resize the div. 
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 

    // Resize the image's div to fit the indicated dimensions. 
    var div = this.div_; 
    div.style.left = sw.x + 'px'; 
    div.style.top = ne.y + 'px'; 
    div.style.width = (ne.x - sw.x) + 'px'; 
    div.style.height = (sw.y - ne.y) + 'px'; 
}; 

// The onRemove() method will be called automatically from the API if 
// we ever set the overlay's map property to 'null'. 
USGSOverlay.prototype.onRemove = function() { 
    this.div_.parentNode.removeChild(this.div_); 
    this.div_ = null; 
}; 

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

Answer 1

Kullanıcı konumunu güncellemek için bazı işleve sahip olmalıdır.

// use the lat and long values for the location you have 
var myLatlng = new google.maps.LatLng(36.166461, -86.771289); 


var marker = new google.maps.Marker({ 
position: (myLatlng), 
data:this, 
map: map, // this will add it to the map 
title: 'user location'}); 

Kimliği sonra Euser konumu inci her basitçe güncelleme değiştirmiş işaretleyici takip öneririz: Eğer (lat ve uzun) bir konuma yerleştirdikten sonra da

sadece bu haritaya bir işaret eklerim doğrusu böyle bir yeni işaretleyici oluşturmak yerine işaretleyici konumu:

var marker = new google.maps.Marker({ 
position: (myLatlng), 
data:this, 
map: map, // this will add it to the map 
icon: new google.maps.MarkerImage("url to where your icon is", 
         new google.maps.Size(32, 32), 
         new google.maps.Point(0, 0), 
         new google.maps.Point(16, 32)) 
title: 'user location'}); 

:

var myNewLocation = new google.maps.LatLng(-36.8485,174.7633); 
    marker.setPosition(myNewLocation);  

bunu İşaretçinizde bir simge ayarlamak için 10

Size yardımcı olabilecek bir JS Fiddle şudur: https://jsfiddle.net/loanburger/48asvsed/