Question

我的代码是：

// Create an object containing LatLng, population.
var cityPoints = {};
cityPoints[0] = {
    center: new google.maps.LatLng(41.878113, -87.629798),
    id: 0,
    addr: 'avenue0',
    magnitude: 100000
};
cityPoints[1] = {
    center: new google.maps.LatLng(40.714352, -74.005973),
    id: 'siv1', 
    addr: 'avenue1',
    magnitude: 100000
};
cityPoints[2] = {
    center: new google.maps.LatLng(34.052234, -118.243684),
    id: 'siv2',
    addr: 'avenue2',
    magnitude: 100000
}
var cityCircle;
var infoWindow = new google.maps.InfoWindow({size: new google.maps.Size(150,150)});  

function initialize() {
    var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    for (i in cityPoints) {
        var magnitudeOptions = {
            map: map,
            center: cityPoints[i].center,
            radius: cityPoints[i].magnitude,
            id:cityPoints[i].id,
            addr:cityPoints[i].addr,
            infoWindowIndex: i,
            strokeColor: '#2d7142',
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: '#7faf8e',
              fillOpacity: 0.2
        };
        cityCircle = new google.maps.Circle(magnitudeOptions);

        google.maps.event.addListener(cityCircle, 'click', (function(cityCircle, i) {
            return function() {  
                infoWindow.setContent(cityPoints[i].id + " " + cityPoints[i].addr);
                infoWindow.setPosition(cityCircle.getCenter());
                infoWindow.open(map);
            }
        })(cityCircle, i));
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

function add()
{
    alert(cityCircle.get('id'));
    alert(cityCircle.get('addr'));
    /* $('#siv2').css('color','red'); */
    alert($('#siva2').length);

}

我想谷歌圈作为标记。我刚刚完成了这个任务，另外我需要改变圆的颜色。

我想借助已经生成的Google圈子 ID

更改已绘制的Google地图圈的颜色

这可能吗???

Answer 1

一种选择是在您将圈子创建为数组时将其推送，以便稍后可以访问它们（例如circles =[];）。遍历数组设置每个圆圈的'fillColor'属性（以及您想要更改的任何其他内容）。

for (var i = 0; i < circles.length; i++) {
  if (circles[i].get('fillColor') == "#FF0000") {
    circles[i].setOptions({fillColor:'#7faf8e'});
  } else {
    circles[i].setOptions({fillColor: "#FF0000"});
  }
}

proof of concept fiddle

代码段

var circles = [];

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  for (i in cityPoints) {
    var magnitudeOptions = {
      map: map,
      center: cityPoints[i].center,
      radius: cityPoints[i].magnitude,
      id: cityPoints[i].id,
      addr: cityPoints[i].addr,
      infoWindowIndex: i,
      strokeColor: '#2d7142',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#7faf8e',
      fillOpacity: 0.2
    };
    cityCircle = new google.maps.Circle(magnitudeOptions);
    circles.push(cityCircle);
    google.maps.event.addListener(cityCircle, 'click', (function(cityCircle, i) {
      return function() {
        infoWindow.setContent(cityPoints[i].id + " " + cityPoints[i].addr);
        infoWindow.setPosition(cityCircle.getCenter());
        infoWindow.open(map);
      }
    })(cityCircle, i));
  }
  google.maps.event.addDomListener(document.getElementById('toggleCircles'), 'click', function() {
    for (var i = 0; i < circles.length; i++) {
      if (circles[i].get('fillColor') == "#FF0000") {
        circles[i].setOptions({
          fillColor: '#7faf8e'
        });
      } else {
        circles[i].setOptions({
          fillColor: "#FF0000"
        });
      }
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
// Create an object containing LatLng, population.
var cityPoints = {};
cityPoints[0] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  id: 0,
  addr: 'avenue0',
  magnitude: 100000
};
cityPoints[1] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  id: 'siv1',
  addr: 'avenue1',
  magnitude: 100000
};
cityPoints[2] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  id: 'siv2',
  addr: 'avenue2',
  magnitude: 100000
}
var cityCircle;
var infoWindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 150)
});

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="toggle" id="toggleCircles" />
<div id="map-canvas"></div>

如果要按其Id设置圆的颜色，请使用由id索引的关联数组：

circles[cityCircle.id] = cityCircle;

然后改变颜色：

var circleId = document.getElementById('circleId').value;
var circle = circles[circleId];
if (circle.get('fillColor') == "#FF0000") {
  circle.setOptions({fillColor: '#7faf8e'});
} else {
  circle.setOptions({fillColor: "#FF0000"});
}

proof of concept fiddle

代码段

var circles = [];

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  for (i in cityPoints) {
    var magnitudeOptions = {
      map: map,
      center: cityPoints[i].center,
      radius: cityPoints[i].magnitude,
      id: cityPoints[i].id,
      addr: cityPoints[i].addr,
      infoWindowIndex: i,
      strokeColor: '#2d7142',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#7faf8e',
      fillOpacity: 0.2
    };
    cityCircle = new google.maps.Circle(magnitudeOptions);
    circles[cityCircle.id] = cityCircle;
    document.getElementById('circleIds').innerHTML += cityCircle.id + "<br>";
    google.maps.event.addListener(cityCircle, 'click', (function(cityCircle, i) {
      return function() {
        infoWindow.setContent(cityPoints[i].id + " " + cityPoints[i].addr);
        infoWindow.setPosition(cityCircle.getCenter());
        infoWindow.open(map);
      }
    })(cityCircle, i));
  }
  google.maps.event.addDomListener(document.getElementById('toggleCircles'), 'click', function() {
    var circleId = document.getElementById('circleId').value;
    var circle = circles[circleId];
    if (circle.get('fillColor') == "#FF0000") {
      circle.setOptions({
        fillColor: '#7faf8e'
      });
    } else {
      circle.setOptions({
        fillColor: "#FF0000"
      });
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

// Create an object containing LatLng, population.
var cityPoints = {};
cityPoints[0] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  id: 0,
  addr: 'avenue0',
  magnitude: 100000
};
cityPoints[1] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  id: 'siv1',
  addr: 'avenue1',
  magnitude: 100000
};
cityPoints[2] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  id: 'siv2',
  addr: 'avenue2',
  magnitude: 100000
}
var cityCircle;
var infoWindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 150)
});

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="toggle" id="toggleCircles" />
<input value="siv2" id="circleId" />
<div id="circleIds"></div>
<div id="map-canvas"></div>

如何使用id编辑谷歌圈的颜色

1 个答案: