Javascript 在谷歌地图上显示用户的当前位置并进行更新

目前，我有一个小程序，加载谷歌地图集中在我想要的位置。用户将在这个位置，但是我想在用户位置上有一个不断更新的标记，这样他们可以在移动时看到他们相对于地图的位置。我的目标是获得与谷歌地图应用程序相同的徽标，带箭头的蓝色圆圈。感谢您的帮助

谢谢

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

//此示例创建一个名为USGSOverlay的自定义覆盖，其中包含
//地图上相关区域的美国地质调查局（USGS）图像。
//将自定义覆盖对象的原型设置为新实例
//在我看来。实际上，这将因此对overlay类进行子类化
//使用
//google.maps.event.addDomListener（）。
//请注意，我们将原型设置为实例，而不是
//父类本身，因为我们不希望修改父类。
var叠加；
USGSOverlay.prototype=new google.maps.OverlayView（）；
//初始化贴图和自定义覆盖。
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：16，
中心：{
拉脱维亚：43.4678683，
液化天然气：-79.7006069
},
mapTypeId:google.maps.mapTypeId.SATELLITE
});
var bounds=new google.maps.LatLngBounds(
新google.maps.LatLng（43.46344509，-79.70671354），
新的google.maps.LatLng（43.47341076，-79.69298207））；
}
/**@constructor*/
函数USGSOverlay（边界、图像、地图）{
//初始化所有属性。
this.bounds=bounds；
this.image=image；
this.map=map；
//定义一个属性来保存图像的div。我们将
//在收到onAdd（）时实际创建这个div
//方法，因此我们暂时将其保留为空。
this.div=null；
//在此覆盖上显式调用setMap。
这个.setMap（map）；
}
/**
*当地图的窗格准备就绪且覆盖已完成时，将调用onAdd
*添加到地图中。
*/
USGSOverlay.prototype.onAdd=函数（）{
var div=document.createElement（'div'）；
div.style.borderStyle='none'；
div.style.borderWidth='0px'；
div.style.position='绝对'；
//创建img元素并将其附加到div。
var img=document.createElement（'img'）；
img.src=this.image；
img.style.width='100%'；
img.style.height='100%'；
img.style.position='绝对'；
儿童分部（img）；
this.div=div；
//将元素添加到“覆盖层”窗格。
var panes=this.getPanes（）；
窗格。覆盖层。附属物（分区）；
};
USGSOverlay.prototype.draw=函数（）{
//我们使用西南部和东北部
//将覆盖层固定到正确位置和大小的坐标。
//为此，我们需要从覆盖中检索投影。
var overlyprojection=this.getProjection（）；
//检索此覆盖的西南和东北坐标
//并将其转换为像素坐标。
//我们将使用这些坐标来调整div的大小。
var sw=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getSouthWest（））；
var ne=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getNorthEast（））；
//调整图像的div大小以适合指定的尺寸。
var div=this.div_2;；
div.style.left=sw.x+‘px’；
div.style.top=ne.y+'px'；
div.style.width=（ne.x-sw.x）+“px”；
div.style.height=（西南y-东北y）+“px”；
};
//如果出现以下情况，将从API自动调用onRemove（）方法
//我们曾经将覆盖的map属性设置为“null”。
USGSOverlay.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
this.div=null；
};
google.maps.event.addDomListener（窗口'load'，initMap）；

---

您应该有一些功能来更新用户位置。一旦你有了位置（横向和纵向）

只需执行此操作即可向地图添加标记：

 // 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提琴帮助您：

您的问题是什么？我不知道如何放置当前位置图标。所以，一个箭头或其他跟踪器会出现在用户的位置上，并随着他们的移动而不断更新。你看到了吗？（注释中的固定链接）