在谷歌地圖上顯示用戶當前位置並更新它

Question

目前我有一個小程序，加載以我想要的位置爲中心的谷歌地圖。用戶將在這個位置，但是我想要在用戶位置不斷更新標記，以便他們可以在移動時看到他們與地圖相關的位置。我的目標是獲得與谷歌地圖應用程序相同的徽標，即帶箭頭的藍色圓圈。任何幫助表示讚賞。

感謝

使用Javascript - 該代碼是從谷歌的開發者頁面採取的地圖疊加，我有重疊部分，現在刪除，但地圖是工作的罰款。

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

編號建議您保留標記的音軌，然後每次日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小提琴幫你：https://jsfiddle.net/loanburger/48asvsed/