javascript - Google map 更改复选框上的 JSON 叠加样式

Question

我希望能够根据是否选中单选按钮来更改 JSON 叠加层的样式。

单选按钮区域 1 到区域 5 更改显示的 JSON

单选按钮颜色 JSON 和静态颜色更改 JSON 样式

我在 SetStyle 函数内部添加了一个简单的 if then 语句

  if (colorjson.checked) {  
      return {
        fillColor: feature.getProperty('COLOR'),
        strokeWeight: 1,
        strokeColor: 'black',
        fillOpacity: 0.4,
        strokeOpacity: 1,
        zIndex: 0
      };
    } else if (colorstatic.checked) {
      return {
      fillColor: '#006d2c',
      strokeWeight: 1,
      strokeColor: 'black',
      fillOpacity: 0.8
      };
    }

这还挺管用的。当我单击静态颜色单选按钮并将鼠标悬停在覆盖层上时，填充颜色会发生变化。

但是，我希望 JSON 的样式在单击时更改。

此外，无论我选择什么样式(Color JSON 或 Color Static)，我都希望该样式能够延续到所有 5 个区域。

完整代码如下:

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 52.656963,
      lng: -112.506664
    },
    gestureHandling: 'greedy',
    mapTypeControl: false
  });

  var area1 = createArea('https://api.myjson.com/bins/myw18');
  var area2 = createArea('https://api.myjson.com/bins/nkbn0');
  var area3 = createArea('https://api.myjson.com/bins/cwnws');
  var area4 = createArea('https://api.myjson.com/bins/106pnw');
  var area5 = createArea('https://api.myjson.com/bins/7lwmk');
  var colorjson = document.getElementById('colorjson');
	var colorstatic = document.getElementById('colorstatic');

  function styleFunc(feature) {
 
      if (colorjson.checked) {	
          return {
            fillColor: feature.getProperty('COLOR'),
            strokeWeight: 1,
            strokeColor: 'black',
            fillOpacity: 0.4,
            strokeOpacity: 1,
            zIndex: 0
          };
        } else if (colorstatic.checked) {
          return {
          fillColor: '#006d2c',
          strokeWeight: 1,
          strokeColor: 'black',
          fillOpacity: 0.8
          };
        }
  }

  // Infowindow
  var infoWindow = new google.maps.InfoWindow({
    zIndex: 2
  });
  map.addListener('click', function() {
    area1.revertStyle();
    area2.revertStyle();
    area3.revertStyle();
    area4.revertStyle();
    area5.revertStyle();
    infoWindow.close();
  })

  function clickFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });

    var CDNAME = event.feature.getProperty('CDNAME');
    var COLOR = event.feature.getProperty('COLOR');

    infoWindow.setPosition(event.latLng);
    infoWindow.setOptions({
      pixelOffset: {
        width: 0,
        height: -3
      }
    });

    infoWindow.setContent(
      "CDNAME: <b>" + CDNAME + "</b><br />" +
      "COLOR: <b>" + COLOR + "</b>"
    );
    infoWindow.open(map);
  }


  function mouseFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }

  function createArea(url) {
    var area = new google.maps.Data();
    area.loadGeoJson(url);
    area.setStyle(styleFunc);
    area.addListener('click', clickFunc);
    area.addListener('mouseover', mouseFunc);
    return area;
  }

  setArea();

  function setArea() {
    infoWindow.close();
    area1.setMap(document.getElementById('area1').checked ? map : null);
    area2.setMap(document.getElementById('area2').checked ? map : null);
    area3.setMap(document.getElementById('area3').checked ? map : null);
    area4.setMap(document.getElementById('area4').checked ? map : null);
    area5.setMap(document.getElementById('area5').checked ? map : null);
  }

  google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area2'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area3'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area4'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area5'), 'click', setArea);

}

#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<p>
Area
</p>
<form class="form">
  <div class="switch-field">
    <input type="radio" id="area1" name="switch-two" checked/>
    <label for="area1">Area 1</label>

    <input type="radio" id="area2" name="switch-two" />
    <label for="area2">Area 2</label>

    <input type="radio" id="area3" name="switch-two" />
    <label for="area3">Area 3</label>

    <input type="radio" id="area4" name="switch-two" />
    <label for="area4">Area 4</label>

    <input type="radio" id="area5" name="switch-two" />
    <label for="area5">Area 5</label>
  </div>
</form>
<p>
Change Color
</p>
    <input type="radio" id="colorjson" name="switch-two" checked/>
    <label for="colorjson">Color JSON</label>

    <input type="radio" id="colorstatic" name="switch-two" />
    <label for="colorstatic">Color Static</label>

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>

Answer 1

一种选择是将这些添加到代码行中，以触发当前事件数据层上的样式函数:

google.maps.event.addDomListener(document.getElementById('colorjson'), 'click', setArea);
google.maps.event.addDomListener(document.getElementById('colorstatic'), 'click', setArea);

proof of concept fiddle

代码片段:

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 52.656963,
      lng: -112.506664
    },
    gestureHandling: 'greedy',
    mapTypeControl: false
  });

  var area1 = createArea('https://api.myjson.com/bins/myw18');
  var area2 = createArea('https://api.myjson.com/bins/nkbn0');
  var area3 = createArea('https://api.myjson.com/bins/cwnws');
  var area4 = createArea('https://api.myjson.com/bins/106pnw');
  var area5 = createArea('https://api.myjson.com/bins/7lwmk');
  var colorjson = document.getElementById('colorjson');
	var colorstatic = document.getElementById('colorstatic');

  function styleFunc(feature) {
 
      if (colorjson.checked) {	
          return {
            fillColor: feature.getProperty('COLOR'),
            strokeWeight: 1,
            strokeColor: 'black',
            fillOpacity: 0.4,
            strokeOpacity: 1,
            zIndex: 0
          };
        } else if (colorstatic.checked) {
          return {
          fillColor: '#006d2c',
          strokeWeight: 1,
          strokeColor: 'black',
          fillOpacity: 0.8
          };
        }
  }

  // Infowindow
  var infoWindow = new google.maps.InfoWindow({
    zIndex: 2
  });
  map.addListener('click', function() {
    area1.revertStyle();
    area2.revertStyle();
    area3.revertStyle();
    area4.revertStyle();
    area5.revertStyle();
    infoWindow.close();
  })

  function clickFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });

    var CDNAME = event.feature.getProperty('CDNAME');
    var COLOR = event.feature.getProperty('COLOR');

    infoWindow.setPosition(event.latLng);
    infoWindow.setOptions({
      pixelOffset: {
        width: 0,
        height: -3
      }
    });

    infoWindow.setContent(
      "CDNAME: <b>" + CDNAME + "</b><br />" +
      "COLOR: <b>" + COLOR + "</b>"
    );
    infoWindow.open(map);
  }


  function mouseFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }

  function createArea(url) {
    var area = new google.maps.Data();
    area.loadGeoJson(url);
    area.setStyle(styleFunc);
    area.addListener('click', clickFunc);
    area.addListener('mouseover', mouseFunc);
    return area;
  }

  setArea();

  function setArea() {
    infoWindow.close();
    area1.setMap(document.getElementById('area1').checked ? map : null);
    area2.setMap(document.getElementById('area2').checked ? map : null);
    area3.setMap(document.getElementById('area3').checked ? map : null);
    area4.setMap(document.getElementById('area4').checked ? map : null);
    area5.setMap(document.getElementById('area5').checked ? map : null);
  }

  google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area2'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area3'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area4'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area5'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('colorjson'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('colorstatic'), 'click', setArea);

}

#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<p>
Area
</p>
<form class="form">
  <div class="switch-field">
    <input type="radio" id="area1" name="switch-two" checked/>
    <label for="area1">Area 1</label>

    <input type="radio" id="area2" name="switch-two" />
    <label for="area2">Area 2</label>

    <input type="radio" id="area3" name="switch-two" />
    <label for="area3">Area 3</label>

    <input type="radio" id="area4" name="switch-two" />
    <label for="area4">Area 4</label>

    <input type="radio" id="area5" name="switch-two" />
    <label for="area5">Area 5</label>
  </div>
</form>
<p>
Change Color
</p>
    <input type="radio" id="colorjson" name="switch-two" checked/>
    <label for="colorjson">Color JSON</label>

    <input type="radio" id="colorstatic" name="switch-two" />
    <label for="colorstatic">Color Static</label>

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>