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

我建议您跟踪标记，然后每次更改用户位置时，只需更新标记的位置，而不是像这样创建新标记：

  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/

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

1 个答案: