在没有坐标的情况下绘制的折线闪烁

blinking of polyline that is drawn without co-ordinates

本文关键字:绘制 折线 闪烁 情况下 坐标      更新时间:2023-09-26

谁能告诉我如何使折线连续闪烁,不使用共形。我已经在没有坐标的谷歌地图中画了一条折线,但我不能像使用坐标的闪烁那样眨眼。

使用坐标闪烁折线

小提琴

没有坐标的折线(如何像上面一样闪烁这个(

小提琴

我的代码如下

$(function(){
 var map    = new google.maps.Map(document.getElementById("map"), {
                  center: new google.maps.LatLng(11.275387916698238, 75.8015380957031),
                  zoom: 12
               }),
     routes = [{origin:'p t usha road, kozhikode', 
               destination:'cooperative hospital, eranjipalam, kozhikode'
               }, 
               {origin:'IIM, Kozhikode',
               destination:'VELLIMADUKUNNU, KOZHIKODE'
               }
              ],
     rendererOptions = {
                preserveViewport: true,
                map:map,
                polylineOptions:{strokeColor:'#FF3300',
                                 strokeWeight: 10},        
                suppressMarkers:true,
                routeIndex:0
              },
     directionsService = new google.maps.DirectionsService();
    var i=0;
var infowindow = new google.maps.InfoWindow();
      $.each(routes,
        function(i,obj){//<--anonymous function
        var request = {
                origin: obj.origin,
                destination: obj.destination,
                travelMode: google.maps.TravelMode.DRIVING
              },
            directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
            directionsService.route(request, function(result, status) {
              if (status == google.maps.DirectionsStatus.OK) {
var lat = result.routes[0].legs[0].start_location.lat();
var lon = result.routes[0].legs[0].start_location.lng();
    var lat1 = result.routes[0].legs[0].end_location.lat();
var lon1 = result.routes[0].legs[0].end_location.lng();             

                  try{  
                  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
                      icon:'https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=B&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1',
        map: map
      });
                            google.maps.event.addListener(marker1, 'click', (function(marker1, i) {
        return function() {
          infowindow.setContent('hh');
          infowindow.open(map, marker1);
        }
      })(marker1, i));                      
                  }catch(e){alert(e)}



                       try{  
                  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(lat1, lon1),
                      icon:'https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=A&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1',
        map: map
      });

                            google.maps.event.addListener(marker2, 'click', (function(marker2, i) {
        return function() {
          infowindow.setContent('hdddh');
          infowindow.open(map, marker2);
        }
      })(marker2, i));                                     
                  }catch(e){alert(e)}


                  directionsDisplay.setDirections(result);
              }
            });  
      i++;
        });});

由 DirectionsRenderer 创建的折线无法通过 API 访问。

您可以做什么:切换渲染器的设置(例如 supressPolylines ( 并重绘结果:

setInterval(function () {
    directionsDisplay.set('suppressPolylines', 
                          !directionsDisplay.get('suppressPolylines'));
    directionsDisplay.setDirections(result);
}, 2000);

演示:http://jsfiddle.net/doktormolle/927DS/