Google Maps JS API

Question

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

我有一个小脚本，自动将地图类型更改为卫星时，高于一个特定的缩放水平，然后再回来。这一切都很棒，然而，如果用户改变了地图类型，那就继续使用他们喜欢的地图类型会更好，而不是每次他们超过缩放级别阈值时我都会覆盖他们。

这不是其他问题的副本，因为我需要找出用户何时更改了映射类型。不是我一个人在剧本里。对于这两种场景，都会触发当前映射类型更改事件。

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

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

​

​