只将symbolpath图标放在当前位置

时间:2014-06-29 01:41:05

标签: google-maps-api-3

我正在尝试将符号路径图标放在路线的当前位置,但图标未显示在地图上。

 var carPath = new google.maps.MVCArray();
 for ( var i = 0; i < path_start.length; i++) {
   if(i === 0) {
      carPath.push(path_start[i]);
     carPolyline.setPath(carPath);
   } else {
      setTimeout((function(latLng) {
      return function() {
        new google.maps.Marker({
                            map: map,
                            icon:{
                                path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

                                scale:3,
                                strokeColor: 'white',
                                strokeWeight: 1,
                                fillOpacity: 0.8,
                                fillColor: 'orange',
                                offset: '100%'

                            },
                            position: path_start[i],

                        });
           carPath.push(latLng);
        };
      })(path_start[i]), 100 * i);
    }
   }

提前谢谢。

http://jsfiddle.net/jemz24/kSKGs/3/

1 个答案:

答案 0 :(得分:1)

在匿名函数中包含您需要google.maps.LatLng对象的变量的名称是latLng,而不是path_start[i]

working fiddle

变化:

    new google.maps.Marker({
                        map: map,
                        icon:{
                            path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

                            scale:3,
                            strokeColor: 'white',
                            strokeWeight: 1,
                            fillOpacity: 0.8,
                            fillColor: 'orange',
                            offset: '100%'

                        },
                        position: path_start[i]
                    });

为:

    new google.maps.Marker({
                        map: map,
                        icon:{
                            path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

                            scale:3,
                            strokeColor: 'white',
                            strokeWeight: 1,
                            fillOpacity: 0.8,
                            fillColor: 'orange',
                            offset: '100%'

                        },
                        position: latLng
                    });

更有可能是您想要的updated fiddle

将图标添加到折线,不要将其作为标记。

var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
   var carPolyline = new google.maps.Polyline({
        map: map,
        geodesic : true,
        strokeColor : '#FF0000',
        strokeOpacity : 1.0,
        strokeWeight : 2,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }],
    });