谷歌地图 JS API答案

【问题标题】：Google Maps JS API谷歌地图 JS API
【发布时间】：2016-04-16 07:31:56
【问题描述】：

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

我有一个小脚本可以在高于特定缩放级别时自动将地图类型更改为卫星，然后再返回。这一切都很棒，但是如果用户更改它，最好继续使用用户首选的地图类型，而不是每次超过缩放级别阈值时我都覆盖它们。

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

【问题讨论】：

【解决方案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（就在调用之前）

【讨论】：

【解决方案2】：

Google 不提供访问 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);
  }
}

【讨论】：