谷歌地圖圈動畫
[英]Google Maps Circles Animation
問題描述
我正在開發一個腳本來鼓勵 Google Maps API 中圓半徑的增加/減少。 但只有 1 個圓圈是動畫的，首先我滾動數組在地圖中繪制圓圈，然后我給出半徑的動畫（縮小和放大）。 解決方案可能是在循環中包含一個間隔。 期待您的幫助，謝謝。
function initialize() { var _radius = 500; var rMin = _radius * 4/5; var rMax = _radius; var direction = 1; var citymap = { chicago: { center: {lat: -12.008711, lng: -77.053376} }, newyork: { center: {lat: -12.01075, lng: -77.070083} }, losangeles: { center: {lat: -12.005359, lng: -77.06835} }, vancouver: { center: {lat: -11.990886, lng: -77.068101} }}; var mapOptions = { center: {lat: -12.004129, lng: -77.056904}, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); for (var city in citymap) { var circleOption = { center: citymap[city].center, fillColor: '#3878c7', fillOpacity: 0.6, map: map, radius: 500, strokeColor: '#3878c7', strokeOpacity: 1, strokeWeight: 0.5 }; var circle = new google.maps.Circle(circleOption); } var circleTimer = setInterval(function(){ var radius = circle.getRadius(); if ((radius > rMax) || (radius < rMin)) { direction *= -1; } var _par = (radius/_radius)-0.7; circleOption.radius = radius + direction * 10; circleOption.fillOpacity = 0.6 * _par; circle.setOptions(circleOption); }, 20); } google.maps.event.addDomListener(window, 'load', initialize); <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map { height: 90%; width: 90% } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script--> <script type="text/javascript"> </script> </head> <body> <div id='map'></div> </body> </html>
謝謝問候
1 個解決方案
解決方案1
2 已采納 2017-01-07 15:45:18
您只需為您創建的圈子的最后一個“城市”創建 setInterval 函數。 解決這個問題的一種選擇是使用函數閉包來關聯 setInterval 函數和圓：
for (var city in citymap) {
createCircle(citymap[city], map);
}
function createCircle(city, map) {
var _radius = 500;
var rMin = _radius * 4 / 5;
var rMax = _radius;
var direction = 1;
var circleOption = {
center: city.center,
fillColor: '#3878c7',
fillOpacity: 0.6,
map: map,
radius: 500,
strokeColor: '#3878c7',
strokeOpacity: 1,
strokeWeight: 0.5
};
var circle = new google.maps.Circle(circleOption);
var circleTimer = setInterval(function() {
var radius = circle.getRadius();
if ((radius > rMax) || (radius < rMin)) {
direction *= -1;
}
var _par = (radius / _radius) - 0.7;
circleOption.radius = radius + direction * 10;
circleOption.fillOpacity = 0.6 * _par;
circle.setOptions(circleOption);
}, 20);
}
代碼片段：
function initialize() { var citymap = { chicago: { center: { lat: -12.008711, lng: -77.053376 }, fillColor: "red" }, newyork: { center: { lat: -12.01075, lng: -77.070083 }, fillColor: "blue" }, losangeles: { center: { lat: -12.005359, lng: -77.06835 }, fillColor: "green" }, vancouver: { center: { lat: -11.990886, lng: -77.068101 }, fillColor: "orange" } }; var mapOptions = { center: { lat: -12.004129, lng: -77.056904 }, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); for (var city in citymap) { createCircle(citymap[city], map); } } google.maps.event.addDomListener(window, "load", initialize); function createCircle(city, map) { var _radius = 500; var rMin = _radius * 4 / 5; var rMax = _radius; var direction = 1; var circleOption = { center: city.center, fillColor: city.fillColor, fillOpacity: 0.6, map: map, radius: 500, strokeColor: '#3878c7', strokeOpacity: 1, strokeWeight: 0.5 }; var circle = new google.maps.Circle(circleOption); var circleTimer = setInterval(function() { var radius = circle.getRadius(); if ((radius > rMax) || (radius < rMin)) { direction *= -1; } var _par = (radius / _radius) - 0.7; circleOption.radius = radius + direction * 10; circleOption.fillOpacity = 0.6 * _par; circle.setOptions(circleOption); }, 20); }
html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map"></div>
在Google Maps API和GeoJSON上圈出“降雨”動畫？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.