Question

在我的Google地图（v3）中添加了一些标签，理想情况下，我喜欢两件事：

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

2）能够根据mapzoom更改标签的文本大小。

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

     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中的maplabel编译的.js，但有一处更改。 mapPane.appendChild已修改为floatPane.appendChild - 这会将所有标签放在我在地图上的任何多边形前面。

这很好用，当我尝试控制标签时出现问题，我尝试与数组中的第一个标签进行交互，这样就没那么高兴了：

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

有人有过类似的问题吗？谢谢你的阅读。

Answer 1

请确保在尝试切换mapLabel的范围内可以访问labelObjects
MapLabel

setVisible

设置MapLabel的visible - 属性不会有任何影响。要显示/隐藏MapLabel，请将MapLabel的map - 属性设置为google.maps.Map - 实例（mymap）或null

＆＃13;

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

＆＃13;

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

＆＃13;

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js"></script>

<div id="map"></div>
<a id="toggle" onclick="labelObjects[0].setMap((labelObjects[0].getMap())?null:mymap)">toggle label#1</a>

＆＃13;

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

1 个答案: