如何在谷歌地图上获得移动对象的Lat Long? [英] How to get Lat Long of moving object on google maps?

查看:128
本文介绍了如何在谷歌地图上获得移动对象的Lat Long?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在Google地图上工作,并在我的地图中使用动画符号文章我的问题是我想获得移动物体的位置(动画符号)。



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

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

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

GetLatLongAtThisPosition(); //我想要这里每次当前的位置

},20);


解决方案

符号没有一个位置,但你可以计算出它:

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

概念证明小提琴

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

var icons = line.get('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);
}

程式码片段:

  //此示例将一个动画符号添加到polyline.var行; 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)]; //使用Google Maps JavaScript API提供的预定义路径('CIRCLE')//定义符号。 var lineSymbol = {path:google.maps.SymbolPath.CIRCLE,scale:8,strokeColor:'#393'}; //创建折线并通过'icons'属性将符号添加到它。 line = new google.maps.Polyline({path:lineCoordinates,icons:[{icon:lineSymbol,offset:'100%'}],map:map}); animateCircle();} //使用DOM setInterval()函数以固定间隔更改符号的偏移量。 var count = 0; window.setInterval(function(){count =(count + 1)%200; var icons = line.get('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);  

html,body,#map-canvas {height:500px;宽度:500px; margin:0px; < script src =https://


I am working on Google maps, and in my map I have build a moving object using Animating Symbols article

my question is that I want to get the location of moving object (animating symbol).

like a symbol is moving between point A to B so I wants to know on each timeticks its location.

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

解决方案

The symbol doesn't have a position, but you can calculate it:

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

code snippet:

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

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

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

这篇关于如何在谷歌地图上获得移动对象的Lat Long?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆