Anzeige der aktuellen Position des Nutzers auf Google Maps und Aktualisierung

Question

Momentan habe ich ein kleines Programm, das Google Maps zentriert auf meinen gewünschten Standort lädt. Der Benutzer wird sich an diesem Ort befinden, ich möchte jedoch einen Marker auf dem Standort des Benutzers haben, der ständig aktualisiert wird, damit er bei der Bewegung sehen kann, wo sich diese in Bezug auf die Karte befinden. Ich möchte das gleiche Logo wie in der Google Maps App bekommen, den blauen Kreis mit einem Pfeil. Jede Hilfe wird geschätzt.

Dank

Javascript - Der Code von der Google-Entwicklerseite für eine Karte Overlay genommen wird, habe ich den Overlay-Abschnitt jetzt entfernt, aber die Karte funktioniert gut.

<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

sollten Sie eine Funktion haben den Standort des Nutzers zu aktualisieren. Dann, wenn Sie den Speicherort (lat und lang) haben

nur fügen diese eine Markierung auf der Karte:

// 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'}); 

Id vorschlagen, dass Sie den Überblick über die Markierung halten dann jedes Mal th Euser Lage geändert aktualisieren Sie einfach die Position der Markierung, anstatt einen neuen Marker wie folgt zu erstellen:

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

ein Symbol auf Ihrer Markierung setzen Sie dies tun:

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

Hier ist ein JS Fiddle, um Ihnen zu helfen: https://jsfiddle.net/loanburger/48asvsed/