在 Google Maps V3 中打开和关闭自定义标签

Question

为我的 Google 地图 (v3) 添加了一些标签，理想情况下我想要两件事：

1) 能够打开和关闭它们（当缩小时标签变得混乱）

2) 能够根据地图缩放更改标签的文本大小。

我这样添加了标签，正在从一些嵌套数组中读取信息：

     for (x = 0; x < areadata.length; x++){//Start Label Loop

        labelObjects[x] = new MapLabel({
            text: areadata [x][0],
            position: new google.maps.LatLng(areadata [x][2], areadata [x][1]),
            map: mymap,
            fontSize: 16,
            align: 'center'
        });

        labelObjects[x].set('position', new google.maps.LatLng(areadata [x][2], areadata [x][1]));

     }

我正在使用来自 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/examples/maplabel.html 的地图标签-compiled.js - 但是有一个变化。 mapPane.appendChild 已修改为 floatPane.appendChild - 这会将所有标签置于我在地图上的任何多边形前面。

这很好用，当我尝试控制标签时出现问题，我试过与数组中的第一个标签进行交互，但没有任何乐趣：

labelObjects[0].setVisible(false);
labelObjects[0].set('visible', false);
labelObjects[0].set('fontSize', 48);

有人遇到过类似的问题吗？感谢阅读。

Answer 1

确保 labelObjects 在尝试切换 mapLabel
MapLabel

setVisible

设置 MapLabel 的 visible-属性不会有任何效果。要 show/hide MapLabel 将 MapLabel 的 map-属性设置为 google.maps.Map-instance(mymap) 或 null

var areadata = [
    ['label#1', 1, 1],
    ['label#2', 2, 2]
  ],
  labelObjects = [],
  mymap;

function init() {
  var myLatlng = new google.maps.LatLng(1.5, 1.5),
    myOptions = {
      zoom: 7,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

  mymap = new google.maps.Map(document.getElementById('map'), myOptions);

  for (x = 0; x < areadata.length; x++) { //Start Label Loop

    labelObjects[x] = new MapLabel({
      text: areadata[x][0],
      position: new google.maps.LatLng(areadata[x][2], areadata[x][1]),
      map: mymap,
      fontSize: 16,
      align: 'center'
    });

    labelObjects[x].set('position', new google.maps.LatLng(areadata[x][2], areadata[x][1]));

  }
  mymap.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('toggle'));
}

google.maps.event.addDomListener(window, 'load', init);

body,
html,
#map {
  margin: 0;
  padding: 0;
  height: 100%;
}
#toggle {
  padding: 1px 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  border-radius:2px;
  background: #fff;
  cursor: pointer;
  margin:4px;
}

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-map-label@1.0.1/src/maplabel.js"></script>

<div id="map"></div>
<a id="toggle" onclick="labelObjects[0].setMap((labelObjects[0].getMap())?null:mymap)">toggle label#1</a>

在 Google Maps V3 中打开和关闭自定义标签

Toggle custom labels on and off in Google Maps V3

google-maps

google-maps-api-3