Google Maps API-围绕标记切换圈子吗？

Question

I'm trying to show an array of markers which, when clicked, will show an infowindow and also a circle with a radius, the size of which is also part of the array. 我试图显示一个标记数组，当单击该标记时，将显示一个信息窗口以及一个半径为半径的圆，其大小也是该数组的一部分。

I've got as far as showing the markers, the infoboxes and the circles, but am struggling with toggling the circles. 我已经尽力显示了标记，信息框和圆圈，但正在努力切换圆圈。

I haven't quite made up my mind if I want the circles to all be initially on or off, I guess that depends how many I end up with... 如果我想让所有圈子开始或消失，我还没有下定决心，我想这取决于我最终有多少...

Here's what I have so far: - 这是我到目前为止的内容：-

<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>

Any help would be much appreciated! 任何帮助将非常感激！

Answer 1

setMap(null) will remove display of any google map controls. setMap(null)将删除任何Google Map控件的显示。 To remove the circle from maps just use 要从地图上删除圆圈，只需使用

   circle.setMap(null)

and to re-render the circle again with different radius 并再次以不同的半径重新渲染圆

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

Google Maps API-围绕标记切换圈子吗？

问题描述

1 个解决方案

解决方案1
0 2012-05-21 13:34:21

Google Maps API-围绕标记切换圈子吗？

问题描述

1 个解决方案

解决方案1 0 2012-05-21 13:34:21

解决方案1
0 2012-05-21 13:34:21