Google 地图更改 JSON 复选框上的叠加样式

Question

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

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

单选按钮颜色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
      };
    }

有点效果。当我单击 Color Static 单选按钮并将鼠标悬停在叠加层上时，填充颜色会发生变化。

但是，我希望 JSON 的样式在单击时发生变化。

此外，无论我选择什么样式（颜色 JSON 或静态颜色），我都希望该样式适用于所有 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>

Google 地图更改 JSON 复选框上的叠加样式

Google Maps Change JSON Overlay Style On Checkbox

javascript

json

google-maps-api-3