高德地圖上面的marker的一些方法沒有百度地圖多 參考了一篇關於百度地圖marker雷達圖的文章 博主很強大 給他點個贊
具體實現思路 ：每一幀改變一下circle半徑即可。然後多個circle覆蓋在一起，按時間差進行繪製，向外擴散時又同步縮減透明度，即可實現水波紋效果。
this.map = new AMap.Map("container",{
// mapStyle: "amap://styles/b12367f2f40ea09b8ae2309649bdb07d", //設置地圖的顯示樣式
// mapStyle: "amap://styles/whitesmoke", //設置地圖的顯示樣式
zoom: 15, //設置地圖的縮放級別
center: this.center, //設置地圖的中心點
resizeEnable: true
});
let marker = new AMap.Marker({
icon: gif,
zIndex: 101,
offset:new AMap.Pixel(25,-49),
map: this.map,
position: [114.39598, 30.51792]
});
let circleMarker = new AMap.Circle({
center:this.center,
map: this.map,
radius:10,
fillColor:"#FF4D50", //圓形填充顏色
fillOpacity: 0.2, //填充透明度
strokeWeight: 1 ,
strokeColor:"#FF4D50", //線條顏色，爲了保證感覺無線條，和填充顏色一致即可
strokeOpacity: 0.2, //線條透明度，爲了保證感覺無線條，和填充顏色透明度一致即可
cursor:'pointer',
zIndex:15,
extData:"data-id"
})
console.log(circleMarker)
AMap.event.addListener(circleMarker, "click", markerClickFire);
function markerClickFire(e) {
console.log(circleMarker.getExtData())
console.log(e.target.data)
}
let requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
let cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame;
let that = this
function CircleShow(radius,level,color){
this.radius = radius;
this.level = new Number(level);
this.color = color;
if(Number.isNaN(this.level)){
this.level = 1;
}//至少1層
if(!this.color || !this.color.fillColor){
this.color = {
fillColor:"blue",//默認藍色
fillOpacity:0.5 //默認初始透明度0.5
}
}
//計算平均每段擴展距離的透明度
this.endOpacity = 0.1; //終止透明度設置爲0.1
this.speedOpacity = (this.color.fillOpacity - this.endOpacity)/this.radius; //每米的透明度
//先加一層白色的覆蓋物，加在圖片上表示覆蓋範圍
this.circle0 = new AMap.Circle({
map:that.map,
center:that.center,
radius:this.radius,
fillColor:"white",
fillOpacity: 0.2,
strokeWeight: 1 ,
strokeColor:"white",
strokeOpacity: 0.2
});
//按層數循環構造覆蓋物，並加在圖片上
this.circles = new Array();
for(let i=1; i< this.level; i++){
let circle = new AMap.Circle({
map:that.map,
center:that.center,
radius:0,
fillColor:this.color.fillColor,
fillOpacity: this.color.fillOpacity,
strokeWeight: 1,
strokeColor:this.color.fillColor,
strokeOpacity: this.color.fillOpacity
});
this.circles.push(circle);
}
this.clock=new Array(this.level);
}
CircleShow.prototype.start = function (distance,t0){
let _self = this;
/**
* 定義動畫函數
* @param startTime 啓動的初始時間
* @param circle 圓形覆蓋物對象
* @param index 序號
*/
function animateStart(startTime,circle,index){
//計算時間差
let time = new Date().getTime()-startTime;
if(time<0){
circle.setOptions({
map:that.map,
center:that.center,
radius:0,
fillColor:_self.color.fillColor,
fillOpacity: _self.color.fillOpacity,
strokeWeight: 1,
strokeColor:_self.color.fillColor,
strokeOpacity: _self.color.fillOpacity
})
// circle.setRadius(0); //半徑
// circle.setFillOpacity(_self.color.fillColor); //透明度
// circle.setStrokeOpacity(_self.color.fillOpacity); //透明度
//如果未達到執行實現則直接等待
_self.clock[index] = window.requestAnimationFrame(animateStart.bind(null,startTime,circle,index));
return;
}
//計算當前半徑
//勻減速運動下，每隔t時間，應該擴散的半徑:
//r=r0*(2*t*t0-t*t)/t0
//其中，r0爲最終的擴散半徑，即this.radius
let r = Math.floor(_self.radius*(2*time/t0-time*time/t0/t0));
let opacity = 0;
if(time >= t0){
//達到運行時間之後
//設置圓形覆蓋物的樣式
circle.setOptions({
map:that.map,
center:that.center,
radius:_self.radius,
fillColor:_self.color.fillColor,
fillOpacity: _self.endOpacity,
strokeWeight: 1,
strokeColor:_self.color.fillColor,
strokeOpacity: _self.endOpacity
})
// circle.setRadius(_self.radius); //半徑
// circle.setFillOpacity(_self.endOpacity); //透明度
// circle.setStrokeOpacity(_self.endOpacity); //透明度
startTime = new Date().getTime() + distance; //起始時間設置爲當前時間加上1倍的時間間隔
_self.clock[index] = window.requestAnimationFrame(animateStart.bind(null,startTime,circle,index));
}else{
//計算透明度
let opacity = _self.color.fillOpacity -
Number.parseFloat((_self.speedOpacity * r).toFixed(5)); //四捨五入小數點後5位
//設置圓形覆蓋物的樣式
circle.setOptions({
map:that.map,
center:that.center,
radius:r,
fillColor:_self.color.fillColor,
fillOpacity: opacity,
strokeWeight: 1,
strokeColor:_self.color.fillColor,
strokeOpacity: opacity
})
// circle.setRadius(r); //半徑
// circle.setFillOpacity(opacity); //透明度
// circle.setStrokeOpacity(opacity); //透明度
_self.clock[index] = window.requestAnimationFrame(animateStart.bind(null,startTime,circle,index));
}
}
//循環每一層執行動畫
for (let [index,circle] of this.circles.entries()) {
animateStart(new Date().getTime()+index*distance, circle, index);
}
}
//半徑、層數、中心點、{填充顏色、初始透明度}
var circles = new CircleShow(40, 5, {fillColor:'#FF4D50',fillOpacity:0.5});
//參數：每一層播放的間隔時間、每一層擴散至最大所花費的總時間。
circles.start(1000,4000);
參考文章https://blog.csdn.net/yingjia11/article/details/86540150