2012-05-21 68 views
0

我試圖展示一個標記數組,當點擊它時,會顯示一個infowindow和一個半徑爲圓的圓,其大小也是數組的一部分。Google Maps API - 圍繞標記切換圈子?

我儘可能地顯示標記,信息框和圓圈,但我正在努力切換圓圈。

我還沒有完全下定了決心,如果我想圓所有被初始開啓或關閉,我想這取決於有多少結了......

這是我到目前爲止有: -

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<title>Google Maps API Tests</title> 
<style type="text/css"> 
html {font-family:Tahoma,verdana,sans-serif; font-size:0.75em;} 
p {font-weight:bold;} 
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
    function initialize() { 

    var myLatlng = new google.maps.LatLng(36.637484, -121.51057); 
    var myOptions = { 
     zoom: 6, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     streetViewControl: true 
    } 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    setMarkers(map, sites); 
    infowindow = new google.maps.InfoWindow({ 
      content: "loading..." 
     }); 

    } 


    var sites = [ 
     ['Google', 37.422117, -122.083856, 'http://www.google.com/', 402336], 
     ['Yahoo', 34.030194, -118.47479, 'http://www.yahoo.com/', 201168] 
    ]; 



    function setMarkers(map, markers) { 

     for (var i = 0; i < markers.length; i++) { 
      var sites = markers[i]; 
      var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
      var marker = new google.maps.Marker({ 
       position: siteLatLng, 
       map: map, 
       title: sites[0], 
       html: '<p>'+sites[0]+'</p><a href="'+sites[3]+'">Web Link</a>' 
      }); 

      var circle = new google.maps.Circle({ 
       map: map, 
       radius: sites[4], 
       fillColor: '#12a3eb', 
       fillOpacity: 0.15, 
       strokeColor: '#0177b3' 
      }); 

      circle.bindTo('center', marker, 'position'); 


      google.maps.event.addListener(marker, "click", function() { 
       infowindow.setContent(this.html); 
       infowindow.open(map, this); 
      }); 
     } 
    } 
//]]> 
</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html> 

任何幫助將不勝感激!

+0

又重新呈現圓的'InfoWindow'有** X **在右上角的那個允許直接控制其顯示。是否有一個事件可用於打開或關閉「環形」(可能是另一個「點擊」標記)? –

回答

0

setMap(null)將刪除任何谷歌地圖控件的顯示。要從地圖圓剛使用

circle.setMap(null) 

,並與不同的半徑

cirlce.setMap(map); 
    circle.set('radius', new_radius_value * 1000);