Question

我正在使用一些映射代码并尝试使用谷歌地图创建一个基本的运动循环。

在这个阶段，我想要做的就是沿着定义点的折线移动一个预定义的图像。

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() 
    {
    var mapProp =   {
                center:new google.maps.LatLng(55.9449229,-3.1966657),
                zoom:10,
                mapTypeId:google.maps.MapTypeId.ROADMAP
                };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var target = {
    url: 'image.gif', // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};
//create a bouncing image
var marker=new google.maps.Marker({
  map:map,
  position: {lat: 55.9449229, lng: -3.1966657},

  icon:target,
animation: google.maps.Animation.BOUNCE,
  });
//try and have a image walk round
 var lineSymbol = {
         path: google.maps.SymbolPath.CIRCLE,     
          //how big is the icon
          scale: 8,
      //color of the icon
      strokeColor: '#FFFF00'
    };

// Create the polyline and add the symbol to it via the 'icons' property.
        var line = new google.maps.Polyline({
      path: [{lat: 55.9449229, lng: -3.1966657}, {lat: 55.9149229, lng: -3.1966657},{lat: 55.9149229, lng: -3.1466657}],
      icons: [{icon: lineSymbol, offset: '100%'}],
      map: map
    });         
    animateCircle(line);
marker.setMap(map);
}   
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:800px;height:600px;"></div>
<script>
function animateCircle(line) {
          var count = 0;
          window.setInterval(function() {
        count = (count + 0.05) % 200;

        var icons = line.get('icons');
        icons[0].offset = (count / 2) + '%';
        line.set('icons', icons);
    }, 20);
  }
</script>
</body>
</html>

我在Notepad ++中写了这个并将其保存为html文件。因此，您可以通过使用正确的扩展名命名图像，将任何您喜欢的图像投射到其中。

如果你运行它，你可以看到正确的绿色圆圈，但当你在＆＃39; lineSymbol＆＃39;更改折线上的目标时目标＆＃39; （链接到图像）它什么都不做。

任何人都有这方面的经验，它本来应该是一个简单的开关，我会想到但是我显然在语法中缺少一些以这种方式使用图像的东西。感谢您对此有任何见解！在谷歌地图上找到有效的文档很有挑战性！

编辑：---根据评论并意识到我试图在圆孔中使用方形插头，我还有另一个想法，我可以用它来替换它希望看看它是否合理。

图像是遵循一个简单的闭环形状，如圆形，方形等，不断循环。

将在两组GPS点之间进行积分以创建平滑的运动工作，适当地改变积分间隔以定义速度。

实际上有一个坐标数组概述一个路径，然后有一个函数取元素[0]并逐渐将其值改为元素[1]的值，并且当它们相同或即将通过时，再次重复使用元素[1]和元素[2]？

我还没有在网上看到这方面的任何例子，所以我可能会再次切入，这条线上有什么建议吗？适应性越强越好。很高兴不必依靠谷歌地图功能。谢谢

在Google地图

0 个答案: