Google地图JS API

Question

使用Google Maps JS API，有没有一种方法可以检测用户是否使用地图类型控件更改了地图类型？

我有一个小脚本，在特定缩放级别以上自动将地图类型更改为卫星视图，然后在之后再次更改回来。这很不错，但是如果他们更改了首选地图类型，则最好保持使用用户的首选地图类型，而不是每次都在跨越缩放级别阈值时强制覆盖它们。

这不是其他问题的重复，因为我需要找出何时由用户更改地图类型，而不是在脚本中由自己更改。当前的地图类型更改事件对于两种情况都会触发。

- rctneil

Answer 1

你可以创建一个标记来识别它。

var userMapStyle,
    scriptTrigger = false;


google.maps.event.addListener(map, "maptypeid_changed", function() {
   var newMapType = map.getMapTypeId();
   if (!scriptTrigger){
      userMapStyle = newMapStyle;
   }
   scriptTrigger = false;
});

google.maps.event.addListener(map, "zoom_changed", function() {
    if(!userMapStyle){
      // change the map style according to your logic as user has not made a selection yet
    }
});

当你的脚本自动更改地图类型时（在进行调用之前），请设置scriptTrigger为true

- Gabriele Petrioli

Answer 2

谷歌不提供访问MapTypeControl的方式。 在这种情况下，您需要自己创建MapTypeController。

以下是一个简单的示例。 如果缩放级别超过8，则自动将地图类型更改为混合模式。 但是您可以使用控制器手动更改地图类型并检测它。

https://jsfiddle.net/wf9a5m75/bbjd8Lth/17/

function CustomMapTypeControl(container, options) {
  google.maps.MVCObject.call(this);

  var self = this;
  self.setValues(options);

  var mapTypes = [
    {label: "ROADMAP", id: google.maps.MapTypeId.ROADMAP},
    {label: "HYBRID", id: google.maps.MapTypeId.HYBRID}
  ];
  var buttons = mapTypes.map(function(mapType) {
    var button = document.createElement("div");
    button.style.float="left";
    button.style.minWidth="38px";
    button.style.fontSize='11px';
    button.style.padding="8px";
    button.style.background="white";
    button.style.color="black";
    button.style.textAlign="center";
    button.style.backgroundClip="padding-box";
    button.style.boxShadow="rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px";
    button.innerText = mapType.label;
    button.id = mapType.id;
    button.style.cursor = "pointer";
    return button;
  });

  buttons.forEach(function(button) {
    google.maps.event.addDomListener(button, 'click', function() {
      var button = this;
      google.maps.event.trigger(self, 'click', button.id);
      self.set("mapTypeId", button.id);
    });
    container.appendChild(button);
  });

}

CustomMapTypeControl.prototype = new google.maps.MVCObject();


/**
 * Start from here (onLoad)
 */
google.maps.event.addDomListener(window, "load", function () {
console.log("OK");
  var div = document.getElementById('map');
  var map = new google.maps.Map(div, {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
    mapTypeControl: false
  });
  var customMapTypeControlDiv = document.createElement("div");
  customMapTypeControlDiv.style.padding="10px";
  var customMapTypeControl = new CustomMapTypeControl(customMapTypeControlDiv, {
    map: map
  });

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(customMapTypeControlDiv);
  customMapTypeControl.bindTo("mapTypeId", map, "mapTypeId", false);

  customMapTypeControl.addListener("click", function(mapTypeId) {
    alert("user clicked = " + mapTypeId);
  });

  map.addListener("zoom_changed", onZoomChanged);
});

function onZoomChanged() {
  var map = this;
  var zoom = map.getZoom();
  if (zoom > 8) {
    map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  } else {
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
  }
}

- wf9a5m75