Question

所以我创建了一个在Google地图上创建圆圈的按钮。

/myBigLongURLMapping

我想设置typz（），这样就可以将圆圈的颜色改为黑色。

this.Circle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: this.map,
    center: this.map.getCenter(),
    radius: 100,
    editable: true,
    draggable: true
});

怎么做？

Answer 1

根据documentation，您可以使用fillColor选项设置颜色：

function changeColor(circle) {
  if (circle.get("fillColor") == "black") {
    circle.setOptions({fillColor:"red", strokeColor: "red"});
  } else {
    circle.setOptions({fillColor: "black", strokeColor: "black"});
  }
}

proof of concept fiddle

代码段

＆＃13;

function changeColor(circle) {
  if (circle.get("fillColor") == "black") {
    circle.setOptions({
      fillColor: "red",
      strokeColor: "red"
    });
  } else {
    circle.setOptions({
      fillColor: "black",
      strokeColor: "black"
    });
  }
}

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var circle = new google.maps.Circle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    center: map.getCenter(),
    radius: 100,
    editable: true,
    draggable: true
  });
  google.maps.event.addDomListener(document.getElementById('tog'), 'click', function(evt) {
    changeColor(circle);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: white;
}

#map_canvas {
  height: 80%;
  width: 100%;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="tog" value="toggle color" />
<div id="map_canvas"></div>

＆＃13;

在google maps api中更改Circle fillColor

1 个答案: