【GoogleMap】利用Google Circle及timeout做出地圖marker ...

先上效果圖Google CirclesGoogle本身有google.maps.Circle用來在地圖上迸出某一個區域圈圈的APIGoogle Circles 本篇簡單來說，就是在Google Map ... 先上效果圖 GoogleCirclesGoogle本身有google.maps.Circle用來在地圖上迸出某一個區域圈圈的APIGoogleCircles 本篇簡單來說，就是在GoogleMap的Marker下方，畫出一個circles，並且透過javascript的timeout不斷改變這個circle的寬度跟顏色，就可以製造出一個Marker腳下有圈圈不斷的變換大小的效果了，在底下的例子，GoogleMap在zoomin、zoomout的過程中為了符合圈圈比例，會把圓圈移除在重畫一個 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253google.maps.event.addListener(map,'zoom_changed',function(){ closeCircle(); openCircle(marker,map.getZoom());});var_circle;var_circleTimer;functionopenCircle(marker,mapZoom){ varproportion; if(mapZoom>16){ proportion=1/Math.pow(2,mapZoom-16);//放大的比例 }else{ proportion=Math.pow(2,16-mapZoom);//縮小的比例 } var_radius=50*proportion; varrMin=_radius*1.0/10;//圓最小半徑 varrMax=_radius;//圓最大半徑 vardirection=1; varlat=marker.getPosition().lat()+(0.00013*proportion);//微調圓中心，讓它更像以圖示為中心 varcircleOption={ center:newgoogle.maps.LatLng(lat,marker.getPosition().lng()), fillColor:'#3878c7', fillOpacity:0.7, map:map, radius:50*proportion, strokeColor:'#3878c7', strokeOpacity:1, strokeWeight:1 }; _circle=newgoogle.maps.Circle(circleOption); //設定circle的timeout內容，每一個timeout改變的圓大小、顏色、快慢等 _circleTimer=setInterval(function(){ varradius=_circle.getRadius();//目前的圓半徑 if((radius>rMax)||(radius