禁用谷歌地图上的可点击地标

Question

我正在使用谷歌地图 API v3。我想禁用默认谷歌地标/poi 上的点击操作。例如，当我放大到 UCLA 时，会显示学校图标（这很好），但我不希望用户单击并查看该位置的详细信息。我应该使用哪个 API 函数？

Answer 1

我遇到了同样的问题。 Google 似乎最近更改了他们的 api 以使基本地图标签“可点击”，并且还没有一个简单的 API 调用来禁用他们的可点击性。 http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f1ac9ad4da3606fe

我希望看到谷歌添加这样一个简单的地图选项，但可惜它还不存在

var opts = { clickableLabels:false };
var map = new maps.google.com.map(div,opts);

以下解决方案有效，但由于它依赖于自定义样式的地图图块，因此免费地图仅限于（每天加载 2,500 张地图）-See Google Maps FAQ。

function initialize() {

  // For more details see 
// http://code.google.com/apis/maps/documentation/javascript/styling.html
  var noPOILabels = [
    { 
      featureType: "poi", 
      elementType: "labels", 
      stylers: [ { visibility: "off" } ] 

    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var noPOIMapType = new google.maps.StyledMapType(noPOILabels,
    {name: "NO POI"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'no_poi']
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('no_poi', noPOIMapType);
  map.setMapTypeId('no_poi');
}

Answer 2

此问题已通过 google 记录在：

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3866

请在此处加注星标并评论您对此问题的需求。

Answer 3

我知道这个问题很老，但也许这个答案会对其他人有所帮助：

我不确定这是否合法，但我最终探索了代码并做了这个：

$("#google-map").on("mousedown",function(){
    setTimeout(function(){
        disableInfoWindows();
    },500);
});

function disableInfoWindows()
{
    $(".gm-iw.gm-sm").parent().parent().remove();
    $("[style='position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px;']")
    .parent()
    .parent()
    .remove();
}

它对我有用，没有显示 infoWindow，同时保留了所有图标。欢迎任何有想法改进代码的人，infoWindow 在第一次打开时只显示一点，在第一次打开之后，它就完全消失了。

Answer 4

我了解 OP 想要一个保留标签/图标但暂停点击事件的解决方案。我不确定这是可能的；请star this issue

但是，我们中的一些人在没有绘图管理器的情况下绘制形状，并且标签/图标阻碍了新点的添加。如果符合您的要求，您可以暂时删除图标/标签。我发现transit、poi和landscape都需要切换：

var map = new google.maps.Map(document.getElementById("map"), {});
map.poi = function(state){

  var styles = [
    {
      "featureType": "transit",
      "stylers": [
        { "visibility": "off" }
      ]
    },{
      "featureType": "poi",
      "stylers": [
        { "visibility": "off" }
      ]
    },{
      "featureType": "landscape",
      "stylers": [
        { "visibility": "off" }
      ]
    }
  ];

  this.set("styles", (state)? {} : styles );

}

及用法：

//turn the labels/icons off
map.poi(false);

//turn them back on
map.poi(true);

Answer 5

Google 已经为此公开了一个选项。请参阅clickableIcons 的google.maps.MapOptions in the docs。

示例初始化代码：

map = new google.maps.Map(document.getElementById('map'), {
    clickableIcons: false
});

Answer 6

将此选项添加到 mapOption 可点击图标：假

这是我认为你会的更多选择

draggable: true, // this is for disable the Draggable
disableDefaultUI: true, // this for disable Default UI
fullscreenControl: false, // this is for disable Full Screen
scrollwheel: true, // this is for disable Scroll Wheel
disableDoubleClickZoom: false, // this is for disable Double Click Zoom
draggableCursor:'crosshair',// this is for cursor type
draggingCursor:'move', // this is for dragging cursor type
minZoom: 3, // this is for min zoom for map
maxZoom: 18 , // this is for max zoom for map
//note : max, min zoom it's so important for my design.
zoom: 14, // this is to make default zoom
clickableIcons: false, // this is to disable all labels icons except your custom infowindow or Infobox.