谷歌地圖圓對象自定義css

我正在使用Google Maps Javascript API v3 Circle對象在地圖上繪製圓圈。我想通過添加一些css動畫來自定義該圓的css。谷歌地圖圓對象自定義css

我知道我可以使用自定義疊加層，但我喜歡Circle類，因爲我可以輕鬆設置半徑並且圓形會自動縮放。

我只想編輯圓的一些CSS屬性，但看着文檔沒有什麼。

我該怎麼做？

這是我目前使用的圈代碼：

var latLng = { 
    lat: 0, 
    lng: 0 
};  
var radius = 200; //200 meters 
var fillColor = "#40ad00"; 
var strokeColor = "#40ad00"; 

var circle = new google.maps.Circle({ 
    center: latLng, 
    radius: radius, 
    strokeColor: strokeColor, 
    strokeOpacity: 0.25, 
    strokeWeight: 1, 
    fillColor: fillColor, 
    fillOpacity: 0.1, 
    map: map 
});

什麼我想要做的是讓地圖上的這個動畫圓。

body { 
 
    background: #000000; 
 
} 
 

 
div.circle { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 50px; 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    border: 2px solid; 
 
    border-radius: 100%; 
 
    box-sizing: border-box; 
 
    animation: spin 5s infinite cubic-bezier(0.075, 0.80, 0.135, 1); 
 
} 
 

 
@keyframes spin { 
 
    0% { 
 
     opacity:0; 
 
     -webkit-transform: scale(0.25); 
 
     border-color: #FFFFFF; 
 
     box-shadow: 0px 0px 0px 1px #FFFFFF; 
 
     } 
 
    15% { 
 
     opacity:1; 
 
     } 
 
    70% { 
 
     opacity:1; 
 
     border-color: #d100ff; 
 
     box-shadow: 0px 0px 50px 1px #d100ff; 
 
     } 
 
    100% { 
 
     opacity:0; 
 
     -webkit-transform: scale(1); 
 
     box-shadow: 0px 0px 50px 1px #FFFFFF; 
 
     } 
 
}

<div class="circle"></div>

來源

2016-07-27 Fr0z3n

爲您的代碼提供圈子。 – Aziz

我不認爲你有不同的選擇，不幸的是他們的基本筆畫，填充，不透明等。但是你也許可以製作一個多邊形，並根據你需要的動畫類型來改變它上面的點。但這會做w/js，而不是css。 – dgig

我使用css3動畫，而不是js。正如我所說，我可以創建一個OverlayView與我的自定義HTML/CSS，但問題是，我不知道如何模仿圓對象..例如：通過米的大小，如半徑屬性.. – Fr0z3n

確定它是不是可以定製谷歌地圖API的Circle對象的樣式。

解決的辦法是創建一個模仿Circle對象的自定義OverlayView。關鍵是讓Circle API計算邊界，並將邊界應用於自定義OverlayView。

這裏是完整的代碼。自定義樣式適用於circle類。

CustomCircle = function(center, radius, map) { 
    //Calculate the bounds with the Circle API 
    this.bounds_ = new google.maps.Circle({ 
    center: center, 
    radius: radius 
    }).getBounds(); 
    this.map_ = map; 
    this.div_ = null; 
    this.setMap(map); 
}; 
CustomCircle.prototype = new google.maps.OverlayView(); 
CustomCircle.prototype.onAdd = function() { 
    var div = document.createElement('div'); 
    div.style.position = 'absolute'; 

    var circle = document.createElement('div'); 
    circle.className = 'circle'; //class with custom styling 
    circle.style.width = '100%'; 
    circle.style.height = '100%'; 
    circle.style.position = 'absolute'; 
    div.appendChild(circle); 

    this.div_ = div; 
    var panes = this.getPanes(); 
    panes.overlayLayer.appendChild(div); 
}; 
CustomCircle.prototype.draw = function() { 
    var overlayProjection = this.getProjection(); 
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 
    var div = this.div_; 
    div.style.left = sw.x + 'px'; 
    div.style.top = ne.y + 'px'; 
    div.style.width = (ne.x - sw.x) + 'px'; 
    div.style.height = (sw.y - ne.y) + 'px'; 
}; 
CustomCircle.prototype.onRemove = function() { 
    this.div_.parentNode.removeChild(this.div_); 
    this.div_ = null; 
};

來源

2016-07-28 12:26:26 Fr0z3n

谷歌地圖圓對象自定義css

回答

相關問題