polygon

polygon

关注
发信
关注(28)粉丝(399)

淡入Google地图中的圈子

本文介绍了淡入Google地图中的圈子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的地图上，我有这样的一个节点/圆是在某个位置绘制的，点击此节点时，其他相关节点就会出现在附近。但是，我想让它们在大约一秒后淡入，而不是突然出现。我已经看过解决方案，但我无法真正理解它将如何转换为我的代码。有没有简单的方法来做到这一点？

  ... 
 
函数initialize（）
 {
 for（var num = 0; num  {
 nodeInfo [num] = 
 {
 center：new google .maps.LatLng（lat [num]，lon [num]）
} 
} 
 
 //样式
 var styles = [
 {
造型师：[
 {
 hue：＃2222EE
}，
 {
饱和度：-40 
} 
] 
}，
 {
 featureType：road，
 elementType：geometry，
 stylers：[
 {
 lightness：100 
}，
 {
可见性：简化
} 
] 
}，
 {
 featureType：road，
 elementType：labels，
 stylers：[
 {
 visibility：off
} 
] 
}，
 {
 featureType：transit.station.bus，
 elementType：labels.icon，
 stylers：[
 {
可见性：关闭
} 
 ] 
} 
]; 
 
 var styledMap = new google.maps.StyledMapType（styles，
 {name：Styled Map}）; 
 
 //地图选项
 var mapOptions = 
 {
 center：new google.maps.LatLng（42.35791，-71.063157），
 zoom： 17，
 mapTypeControlOptions：
 {
 mapTypeIds：[google.maps.MapTypeId.ROADMAP，'map_style'] 
} 
}; 
 
 map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）; 
 
 map.mapTypes.set（'map_style'，styledMap）; 
 map.setMapTypeId（'map_style'）; 
 
 nodeDisplay（）; 
} 
 
 function nodeDisplay（）
 {
 var drawNode; 
 
 for（var i in nodeInfo）
 {
 if（i> = 1）
 {
 if（nodeSelect == true）
 {
 drawNode = {
 strokeColor：'＃0000FF'，
 fillColor：'＃0000FF'，
 strokeWeight：2，
 fillOpacity：1，
 map：map，
 center：nodeInfo [i] .center，
 radius：4，
 visible：true 
}; 
} 
 else 
 {
 drawNode = {
 strokeColor：'＃0000FF'，
 fillColor：'＃0000FF'，
 strokeWeight： 2，
 fillOpacity：1，
 map：map，
 center：nodeInfo [i] .center，
 radius：4，
 visible：false 
 }; 
} 
} 
 else 
 {
 drawNode = {
 strokeColor：'＃FF0000'，
 fillColor：'＃FF0000'，
 strokeWeight：2，
 fillOpacity：1，
 map：map，
 center：nodeInfo [i] .center，
 radius：6 
}; 
} 
 
 node [i] = new google.maps.Circle（drawNode）; 
 attachMessage（i）; 
 
 
 
函数clearOverlays（）
 {
 for（var i in nodeInfo）
 {
 if（i > 0）
 {
 node [i] .setMap（null）; 
 
 
 
 $ b函数attachMessage（数字）
 {
 var message =你好。这是节点号码+数字+。; 
 var infowindow = new google.maps.InfoWindow（{
 size：new google.maps.Size（50，50）
}）; 
 
 infowindow.content = message; 
 
 google.maps.event.addListener（node [number]，'click'，function（）
 {
 //infowindow.open(map，node [number]） ; 
 clearOverlays（）; 
 nodeSelect =！nodeSelect; 
 nodeDisplay（）; 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）;


解决方案

淡入淡出一个）：
$ b $ pre $ 函数polygon_fadein（polygon，seconds，callback）{
polygon.setOptions（{fillOpacity：0， strokeOpacity，用于：0}）;
var fill = 50 /（seconds * 999）;
var stroke = 50 /（seconds * 999）; （（polygon.get（strokeOpacity）> 0.99）&&（polygon.get（fillOpacity）> 0.99））
var fadein = setInterval（function（）{
） {
clearInterval（fadein）;
if（typeof（callback）=='function'）
callback（）;
return;
}
多边形.setOptions（{$ b $'fillOpacity'：Math.min（1.0，polygon.fillOpacity + fill），
'strokeOpacity'：Math.min（1.0，polygon.strokeOpacity + stroke）
} ）;
}，50）;

程式码片段： 



  var nodeSelect = true; // Boston 42.3584308，-71.0597732var lat = [42.350542,42.353036,42.358249,42.350101,42.350190]; var lon = [-71.074856， - （var num = 0; num  0.99））{clearInterval（fadein）; if Math.min（1.0，polygon.fillOpacity + fill），'strokeOpacity'：Math.min（1.0，polygon.setOptions（''fillOpacity'：Math.min（1.0，polygon.fillOpacity + fill） .strokeOpacity + stroke）}）;}，50）;} google.maps.event.addDomListener（window，'load'，initialize）; // Stylesvar styles = [{stylers：[{hue：＃2222EE {featureType：road，elementType：geometry，stylers：[{lightness：100}，{visibility：simplified}]}，{featureType：road，elementType： labels，stylers：[{visibility：off}]}，{featureType：transit.station.bus，elementType：labels.icon，stylers：[{visibility：off}]}]
html，body，＃map_canvas {保证金：0;填充：0; height：100％;} < script src = https://maps.googleapis.com/maps/api/js\"></script><div id =map-canvasstyle =height：600px; width：800px;>< / div>< div id =polygonCoords>< / div>

On my map, I have it so that a node/circle is drawn at a certain location, and when this node is clicked, other related nodes appear nearby. However, I'd like to have them fade in after about one second instead of just appearing suddenly. I already had a look at this solution, but I couldn't really understand how it would translate over to my code. Is there an easy way to do this?

...

function initialize()
            {
            for(var num = 0; num < lat.length; num++)
            {
                nodeInfo[num] = 
                {
                    center: new google.maps.LatLng(lat[num], lon[num])
                }
            }

                // Styles
                var styles = [
                    {
                        stylers: [
                            {
                                hue: "#2222EE"
                            },
                            {
                                saturation: -40
                            }
                        ]
                    },
                    {
                        featureType: "road",
                        elementType: "geometry",
                        stylers: [
                            {
                                lightness: 100
                            },
                            {
                                visibility: "simplified"
                            }
                        ]
                    },
                    {
                        featureType: "road",
                        elementType: "labels",
                        stylers: [
                            {
                                visibility: "off"
                            }
                        ]
                    },
                    {
                        featureType: "transit.station.bus",
                        elementType: "labels.icon",
                        stylers: [
                            {
                                visibility: "off"
                            }
                        ]
                    }               
                ];

                var styledMap = new google.maps.StyledMapType(styles,
                {name: "Styled Map"});

                // Options for map
                var mapOptions =
                {
                    center: new google.maps.LatLng(42.35791, -71.063157),
                    zoom: 17,
                    mapTypeControlOptions:
                    {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                    }               
                };

                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                map.mapTypes.set('map_style', styledMap);
                map.setMapTypeId('map_style');

                nodeDisplay();  
            }       

            function nodeDisplay()
            {
                var drawNode;

                for(var i in nodeInfo)
                {   
                    if(i >= 1)
                    {
                        if(nodeSelect == true)
                        {
                            drawNode = {
                                strokeColor: '#0000FF',
                                fillColor: '#0000FF',
                                strokeWeight: 2,
                                fillOpacity: 1,
                                map: map,
                                center: nodeInfo[i].center,
                                radius: 4,
                                visible: true
                            };
                        }
                        else
                        {
                            drawNode = {
                                strokeColor: '#0000FF',
                                fillColor: '#0000FF',
                                strokeWeight: 2,
                                fillOpacity: 1,
                                map: map,
                                center: nodeInfo[i].center,
                                radius: 4,
                                visible: false
                            };
                        }
                    }
                    else
                    {
                        drawNode = {
                            strokeColor: '#FF0000',
                            fillColor: '#FF0000',
                            strokeWeight: 2,
                            fillOpacity: 1,
                            map: map,
                            center: nodeInfo[i].center,
                            radius: 6
                        };
                    }

                    node[i] = new google.maps.Circle(drawNode);
                    attachMessage(i);
                }
            }

            function clearOverlays()
            {
                for(var i in nodeInfo)
                {
                    if(i > 0)
                    {
                        node[i].setMap(null);
                    }
                }
            }

            function attachMessage(number)
            {
                var message = "Hello. This is node number " + number + ".";
                var infowindow = new google.maps.InfoWindow({
                    size: new google.maps.Size(50, 50)
                });

                infowindow.content = message;

                google.maps.event.addListener(node[number], 'click', function()
                {
                    //infowindow.open(map, node[number]);
                    clearOverlays();
                    nodeSelect = !nodeSelect;
                    nodeDisplay();
                });     
            }

            google.maps.event.addDomListener(window, 'load', initialize);
解决方案

Fade the circles in (start at zero, end at one):

function polygon_fadein(polygon, seconds, callback){
    polygon.setOptions({fillOpacity:0, strokeOpacity:0});
    var fill = 50/(seconds*999);
    var stroke = 50/(seconds*999);
    var fadein = setInterval(function(){
        if((polygon.get("strokeOpacity") > 0.99) &&  (polygon.get("fillOpacity") > 0.99)){
            clearInterval(fadein);
            if(typeof(callback) == 'function')
                callback();
            return;
        }
        polygon.setOptions({
            'fillOpacity': Math.min(1.0, polygon.fillOpacity+fill),
            'strokeOpacity': Math.min(1.0, polygon.strokeOpacity+stroke)
        });
    }, 50);
}

code snippet:

var nodeSelect = true;
// Boston 42.3584308, -71.0597732
var lat = [42.350542, 42.353036, 42.358249, 42.350101, 42.350190];
var lon = [-71.074856, -71.059052, -71.057507, -71.087478, -71.059300];
var nodeInfo = [];
var node = [];
var map = null;

function initialize() {
  for (var num = 0; num < lat.length; num++) {
    nodeInfo[num] = {
      center: new google.maps.LatLng(lat[num], lon[num])
    }
  }

  var styledMap = new google.maps.StyledMapType(styles, {
    name: "Styled Map"
  });

  // Options for map
  var mapOptions = {
    center: new google.maps.LatLng(42.35791, -71.063157),
    zoom: 15,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

  nodeDisplay();
}

function nodeDisplay() {
  var drawNode;

  for (var i in nodeInfo) {
    if (i >= 1) {
      if (nodeSelect == true) {
        drawNode = {
          strokeColor: '#0000FF',
          fillColor: '#FF0000', //'#0000FF',
          strokeWeight: 2,
          fillOpacity: 1,
          map: map,
          center: nodeInfo[i].center,
          radius: 40,
          visible: true
        };

      } else {
        drawNode = {
          strokeColor: '#0000FF',
          fillColor: '#FF0000', //'#0000FF',
          strokeWeight: 2,
          fillOpacity: 1,
          map: map,
          center: nodeInfo[i].center,
          radius: 40,
          visible: false
        };
      }
    } else {
      drawNode = {
        strokeColor: '#FF0000',
        fillColor: '#FF0000',
        strokeWeight: 2,
        fillOpacity: 1,
        map: map,
        center: nodeInfo[i].center,
        radius: 60
      };
    }

    node[i] = new google.maps.Circle(drawNode);
    polygon_fadein(node[i], 5);
    attachMessage(i);
  }
}

function clearOverlays() {
  for (var i in nodeInfo) {
    if (i > 0) {
      node[i].setMap(null);
    }
  }
}

function attachMessage(number) {
  var message = "Hello. This is node number " + number + ".";
  var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(50, 50)
  });

  infowindow.setContent(message);

  google.maps.event.addListener(node[number], 'click', function() {
    infowindow.setPosition(node[number].getCenter());
    infowindow.open(map);
  });
}

function polygon_fadein(polygon, seconds, callback) {
  polygon.setOptions({
    fillOpacity: 0,
    strokeOpacity: 0
  });
  var fill = 50 / (seconds * 999);
  var stroke = 50 / (seconds * 999);
  var fadein = setInterval(function() {
    if ((polygon.get("strokeOpacity") > 0.99) && (polygon.get("fillOpacity") > 0.99)) {
      clearInterval(fadein);
      if (typeof(callback) == 'function')
        callback();
      return;
    }
    polygon.setOptions({
      'fillOpacity': Math.min(1.0, polygon.fillOpacity + fill),
      'strokeOpacity': Math.min(1.0, polygon.strokeOpacity + stroke)
    });
  }, 50);
}

google.maps.event.addDomListener(window, 'load', initialize);

// Styles
var styles = [{
  stylers: [{
    hue: "#2222EE"
  }, {
    saturation: -40
  }]
}, {
  featureType: "road",
  elementType: "geometry",
  stylers: [{
    lightness: 100
  }, {
    visibility: "simplified"
  }]
}, {
  featureType: "road",
  elementType: "labels",
  stylers: [{
    visibility: "off"
  }]
}, {
  featureType: "transit.station.bus",
  elementType: "labels.icon",
  stylers: [{
    visibility: "off"
  }]
}];
html,
body,
#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="height: 600px; width:800px;"></div>
<div id="polygonCoords"></div>

这篇关于淡入Google地图中的圈子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-27 11:22
Powered by LMLPHP ©2024 polygon 0.009322