淡入Google地图中的圈子 [英] Fade In circles in Google Maps
问题描述
在我的地图上,我有这样的一个节点/圆是在某个位置绘制的,点击此节点时,其他相关节点就会出现在附近。但是,我想让它们在大约一秒后淡入,而不是突然出现。我已经看过这个解决方案,但我无法真正理解它将如何转换为我的代码。有没有简单的方法来做到这一点?
...
函数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地图中的圈子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!