在谷歌地图上显示用户当前位置并更新它

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/