Отображение текущего местоположения пользователей на картах Google и его обновление

Question

В настоящее время у меня есть небольшая программа, которая загружает карты Google, расположенные по моему желаемому местоположению. Пользователь будет в этом месте, однако я хочу, чтобы маркер в местоположении пользователей постоянно обновлялся, чтобы они могли видеть, где они находятся по отношению к карте по мере их перемещения. Я собираюсь получить тот же логотип, что и в приложении Google Maps, синий круг со стрелкой. Любая помощь приветствуется.

Благодаря

Javascript - код берется со страницы разработчиков Google для наложения на карту, у меня есть секция наложения удалены прямо сейчас, но карта работает нормально.

<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

Вы должны иметь какую-то функцию, чтобы обновить местоположение пользователя. Тогда, как только у вас есть место (лат и долго)

просто это добавить маркер на карте:

// 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 предлагаю вам следить за маркером, то каждый раз е EUSER место изменилось просто обновить положение маркера, а не создавать новый маркер, как это:

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

Чтобы установить значок на маркер вы делаете это:

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

Настоящий JS Fiddle поможет вам: https://jsfiddle.net/loanburger/48asvsed/