cách animate google maps api circle?

Question

Tôi đã xây dựng một hoạt hình xung trong CSS3 Tôi muốn thực hiện trong đánh dấu trong bản đồ google api tiếc là nó không thể chèn trực tiếp vào bản đồ. Có tùy chọn nào cho hoạt ảnh CSS3hoặc Có thể đặt bản đồ google vòng tròn tăng và giảm dưới dạng hoạt ảnh hay không.

var myCity = new google.maps.Circle({ 
    center: bigOne, 
    radius: 150, 
    strokeColor: "#E16D65", 
    strokeWeight: 2, 
    fillColor: "#E16D65", 
    fillOpacity: 0 
}); 
var smallcircle = new google.maps.Circle({ 
    center: smallOne, 
    radius: 300, 
    strokeColor: "#E16D65", 
    strokeOpacity: 1, 
    strokeWeight: 2, 
    fillColor: "#E16D65", 
    fillOpacity: 0 
}); 

DEMO http://jsfiddle.net/gbqzQ/4/

Answer 1

Bạn có thể thay đổi bán kính vòng tròn sử dụng setRadius() phương pháp và làm cho hình ảnh động sử dụng setInterval():

var direction = 1; 
    var rMin = 150, rMax = 300; 
    setInterval(function() { 
     var radius = circle.getRadius(); 
     if ((radius > rMax) || (radius < rMin)) { 
      direction *= -1; 
     } 
     circle.setRadius(radius + direction * 10); 
    }, 50); 

Xem example at jsbin.

Cập nhật: Bán kính khi thu phóng: bạn phải thay đổi nó bằng hệ số 2. Xem cập nhật example at jsbin.