根据条件更改Maps API样式

Question

我已将以下地图作为基础。这是一张非常规则的地图。

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: {lat: 23.9096187, lng: -29.6761281},
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      disableDefaultUI: true
    });
  }

然而！如果某个条件为真，我想实现这些样式（例如，如果var temp> 80，则添加此样式）。这可能吗？

 {
    stylers: [
      {hue: '#890000'},
      {visibility: 'simplified'},
      {gamma: 0.5},
      {weight: 0.5}
    ]
  },
  {
    elementType: 'labels',
    stylers: [{visibility: 'off'}]
  },
  {
    featureType: 'water',
    stylers: [{color: '#890000'}]
  }
], {
  name: 'Custom Style'
  });
var customMapTypeId = 'custom_style';

  map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(customMapTypeId);

Answer 1

您可以随时致电：

将地图样式更改为您定义的样式

Text Input Field

假设<input type="text" class="form-control" name="first_name" id="first_name" value="{{$contact->first_name}}" required="required"> 在范围内（要么使其成为全局，要么创建在initMap函数范围内更改它的函数，因为map.setOptions({ styles: [{ stylers: [{ hue: '#890000' }, { visibility: 'simplified' }, { gamma: 0.5 }, { weight: 0.5 }] }, { elementType: 'labels', stylers: [{ visibility: 'off' }] }, { featureType: 'water', stylers: [{ color: '#890000' }] }] }); 当前对该函数是lolocal）。

proof of concept fiddle

代码段

＆＃13;

＆＃13;

map

＆＃13;

map

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var toggle = true;
  google.maps.event.addDomListener(document.getElementById("btn"), 'click', function() {
    if (toggle) {
      map.setOptions({
        styles: [{
          stylers: [{
            hue: '#890000'
          }, {
            visibility: 'simplified'
          }, {
            gamma: 0.5
          }, {
            weight: 0.5
          }]
        }, {
          elementType: 'labels',
          stylers: [{
            visibility: 'off'
          }]
        }, {
          featureType: 'water',
          stylers: [{
            color: '#890000'
          }]
        }]
      });

    } else {
      map.setOptions({
        styles: []
      });
    }
    toggle = !toggle;
  });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

＆＃13;

＆＃13;