更改 google 地图 api 中的圆形填充颜色

Question

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

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
});

我想设置 typz() 以便它将圆圈的颜色更改为黑色。

typz(){
}

如何操作？

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

代码片段：

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

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

#map_canvas {
  height: 80%;
  width: 100%;
}

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

更改 google 地图 api 中的圆形填充颜色

Changing Circle fillColor in google maps api

google-maps

google-maps-api-3

ionic-framework

ionic2

ionic3