Question

我正在使用Google地图，在我的地图中，我使用Animating Symbols文章构建了一个移动对象

我的问题是我想获得移动物体的位置（动画符号）。

就像一个符号在A点到B点之间移动所以我想知道每个时刻它的位置。

function animateCircle() {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);

      GetLatLongAtThisPosition(); // i wants to get the current location of here each time          

  }, 20);
}

Answer 1

符号没有位置，但您可以计算它：

var position = google.maps.geometry.spherical.interpolate(lineCoordinates[0], lineCoordinates[1], (count / 200));

proof of concept fiddle

function animateCircle() {
  var infowindow = new google.maps.InfoWindow();
  var count = 0;
  window.setInterval(function () {
    count = (count + 1) % 200;

    var icons = line.get('icons');
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
    var position = google.maps.geometry.spherical.interpolate(lineCoordinates[0], lineCoordinates[1], (count / 200));
    if (!marker) {
        marker = new google.maps.Marker({
            position: position,
            map: map
        });
        infowindow.setContent(marker.getPosition().toUrlValue(6));
        infowindow.open(map,marker);
    } else {
        marker.setPosition(position);
    }
    infowindow.setContent(marker.getPosition().toUrlValue(6));
  }, 20);
}

代码段：

＆＃13;

// This example adds an animated symbol to a polyline.

var line;
var marker;
var lineCoordinates;
var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(20.291, 153.027),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  lineCoordinates = [
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027)
  ];

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  line = new google.maps.Polyline({
    path: lineCoordinates,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle();
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle() {
  var infowindow = new google.maps.InfoWindow();
  var count = 0;
  window.setInterval(function() {
    count = (count + 1) % 200;

    var icons = line.get('icons');
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
    var position = google.maps.geometry.spherical.interpolate(lineCoordinates[0], lineCoordinates[1], (count / 200));
    if (!marker) {
      marker = new google.maps.Marker({
        position: position,
        map: map
      });
      infowindow.setContent(marker.getPosition().toUrlValue(6));
      infowindow.open(map, marker);
    } else {
      marker.setPosition(position);
    }
    infowindow.setContent(marker.getPosition().toUrlValue(6));
  }, 20);
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

＆＃13;

Answer 2

不幸的是，我认为你不能使用谷歌地图API获得LatPath的Symbol。

如果您console.log icons[0]，您会看到icon object只有路径，比例和 strokeColor ：

console.log(icons[0].icon)

{ 
  path: 0, 
  scale: 8, 
  strokeColor: "#393"
}

如何在谷歌地图上获得Lat Long的移动物体？

2 个答案: