在Google地图中淡入圆圈
在Google地图中淡入圆圈
提问于 2013-08-14 23:18:45
在我的地图上，我有它，以便在某个位置绘制一个节点/圆，当单击此节点时，其他相关节点会出现在附近。但是，我希望它们在大约一秒钟后淡入，而不是突然出现。我已经看过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);回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-15 07:00:37
淡入圆圈(从零开始，在一结束)：
function polygon_fadein(polygon, seconds, callback){
polygon.setOptions({fillOpacity:0, strokeOpacity:0});
// The "fade task" runs every 50 ms, seconds is the total time to fade,
// multiplied by approximately 1000 to turn it into milliseconds.
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);
}代码片段：
var nodeSelect = true;
// Boston 42.3584308, -71.0597732
var lat = [42.350542, 42.353036, 42.358249, 42.350101, 42.350190, 42.3634819];
var lon = [-71.074856, -71.059052, -71.057507, -71.087478, -71.059300, -71.0686226];
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="height: 600px; width:800px;"></div>
<div id="polygonCoords"></div>
(问题中的原始代码很可能来自：Is there a way to fade out a V3 google.maps.Polygon?)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18235674
复制相关文章
相似问题