使用markercluster时从地图标记中删除标签

我们正在使用自定义标签代码在Google地图中添加带有标签的标记,并且还在使用MarkerCluster库对标记进行聚类。

我们的问题是标记正在隐藏,但标签仍在显示。我们需要修改http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js

同时隐藏“标签”和标记。我一直试图在没有运气的情况下找到在markercluster.js中添加或删除标签的位置。

这是我们的标签代码:

    // Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
     // Initialization
     this.setValues(opt_options);

     // Here go the label styles
     var span = this.span_ = document.createElement('span');
     span.style.cssText = 'position: relative; left: -50%; top: -35px; ' +
                          'white-space: nowrap;color:#000000;' +
                          'padding: 2px;font-family: Arial; font-weight: bold;' +
                          'font-size: 12px;';

     var div = this.div_ = document.createElement('div');
     div.appendChild(span);
     div.style.cssText = 'position: absolute; display: none';
};

Label.prototype = new google.maps.OverlayView;

Label.prototype.onAdd = function() {
     var pane = this.getPanes().overlayImage;
     pane.appendChild(this.div_);

     // Ensures the label is redrawn if the text or position is changed.
     var me = this;
     this.listeners_ = [
          google.maps.event.addListener(this, 'position_changed',
               function() { me.draw(); }),
          google.maps.event.addListener(this, 'text_changed',
               function() { me.draw(); }),
          google.maps.event.addListener(this, 'zindex_changed',
               function() { me.draw(); })
     ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
     this.div_.parentNode.removeChild(this.div_);

     // Label is removed from the map, stop updating its position/text.
     for (var i = 0, I = this.listeners_.length; i < I; ++i) {
          google.maps.event.removeListener(this.listeners_[i]);
     }
};

// Implement draw
Label.prototype.draw = function() {
     var projection = this.getProjection();
     var position = projection.fromLatLngToDivPixel(this.get('position'));
     var div = this.div_;
     div.style.left = position.x + 'px';
     div.style.top = position.y + 'px';
     div.style.display = 'block';
     div.style.zIndex = this.get('zIndex'); //ALLOW LABEL TO OVERLAY MARKER
     this.span_.innerHTML = this.get('text').toString();
};


function initialize() {

  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     setMarkers(map, beaches);  


}

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

var markersArray = [];
var labelsArray = [];

var beaches = [
     ['Bondi Beach', -33.890542, 151.274856, 4],
     ['Cronulla Beach', -34.028249, 151.157507, 3],
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
     ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
     var image = new google.maps.MarkerImage('marker.png',
     new google.maps.Size(100, 39),
     new google.maps.Point(0,0),
     new google.maps.Point(50, 39));
    /* var shadow = new google.maps.MarkerImage('marker-panel.png',
          new google.maps.Size(37, 32),
          new google.maps.Point(0,0),
          new google.maps.Point(0, 32));*/
     var shape = {
          coord: [1, 1, 1, 20, 18, 20, 18 , 1],
          type: 'poly'
     };
     for (var i = 0; i < locations.length; i++) {
          var beach = locations[i];
          var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
          var marker = new google.maps.Marker({
               position: myLatLng,
               map: map,
               //shadow: shadow,
               icon: image,
               shape: shape,
               title: beach[0],
              zIndex: beach[3]
          });
          var label = new Label({
               map: map
          });
          label.set('zIndex', 1234);
          label.bindTo('position', marker, 'position');
          label.set('text', beach[0]);
          //label.bindTo('text', marker, 'position');
          markersArray.push(marker);
          labelsArray.push(label);

     }

     var markerCluster = new MarkerClusterer(map, markersArray);

}

谁能告诉我在markercluster.js中应该进行哪些更改以使其也删除标签?

莫勒博士

将其添加到for循环的末尾:

  (function(m,l){
    google.maps.event.addListener(m,'map_changed',function(){l.setMap(this.getMap());});
  })(marker,label)

将标记添加到群集或从群集中删除后,地图属性将会更改。该脚本将设置maplabelmapmarker(这是基本相同label.bindTo('map',marker,'map')的,但它好像bindTo不在这里工作了)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

当标记聚集时,从Leaflet.markercluster中删除标记

来自分类Dev

如何在javascript中删除我的地图标记

来自分类Dev

使用OverlappingMarkerSpiderfier时如何处理地图标记的OnClick?

来自分类Dev

使用datasnapshot从地图标记中获取数据

来自分类Dev

谷歌地图-从javascript动态删除标记图标

来自分类Dev

在谷歌地图标记上添加标签和图标

来自分类Dev

Google地图标记-“信息”窗口需要删除标记

来自分类Dev

如何使用谷歌地图标记地点

来自分类Dev

地图标记无法在HTML中使用

来自分类Dev

如何使用淡出动画iOS swift 3删除谷歌地图标记?

来自分类Dev

在Android中使用动态颜色设置地图标记图标

来自分类Dev

如何通过 JavaScript 删除或清除 Google 地图标记?

来自分类Dev

从服务器检索位置并使用排球库显示在Google地图标记中?

来自分类Dev

如何使用angularjs中的下拉值过滤谷歌地图标记?

来自分类Dev

从服务器检索位置并使用排球库显示在Google地图标记中?

来自分类Dev

使用地图标记在kickout.js中连接列表视图

来自分类Dev

单击时获取相同的 Google 地图标记 ID

来自分类Dev

从传单地图的标准标记中删除阴影?

来自分类Dev

如何使用JavaScript缩放此处所有的诺基亚地图标记存储在数组值中的标记

来自分类Dev

是否可以对地图标签中的图像使用工具提示?

来自分类Dev

在Google地图标记中显示多个字符

来自分类Dev

将图像从Firebase存储到Google地图标记中

来自分类Dev

在Google地图标记中显示多个字符

来自分类Dev

引导程序中的地图标记和列表

来自分类Dev

从 GeoJson 文件中显示一个地图标记

来自分类Dev

如何使用Skobbler旋转地图标记

来自分类Dev

使用json将infoWindow添加到地图标记

来自分类Dev

如何使用 asynctask 从 URL 获取 Google 地图标记?

来自分类Dev

非对称地图标记

Related 相关文章

  1. 1

    当标记聚集时,从Leaflet.markercluster中删除标记

  2. 2

    如何在javascript中删除我的地图标记

  3. 3

    使用OverlappingMarkerSpiderfier时如何处理地图标记的OnClick?

  4. 4

    使用datasnapshot从地图标记中获取数据

  5. 5

    谷歌地图-从javascript动态删除标记图标

  6. 6

    在谷歌地图标记上添加标签和图标

  7. 7

    Google地图标记-“信息”窗口需要删除标记

  8. 8

    如何使用谷歌地图标记地点

  9. 9

    地图标记无法在HTML中使用

  10. 10

    如何使用淡出动画iOS swift 3删除谷歌地图标记?

  11. 11

    在Android中使用动态颜色设置地图标记图标

  12. 12

    如何通过 JavaScript 删除或清除 Google 地图标记?

  13. 13

    从服务器检索位置并使用排球库显示在Google地图标记中?

  14. 14

    如何使用angularjs中的下拉值过滤谷歌地图标记?

  15. 15

    从服务器检索位置并使用排球库显示在Google地图标记中?

  16. 16

    使用地图标记在kickout.js中连接列表视图

  17. 17

    单击时获取相同的 Google 地图标记 ID

  18. 18

    从传单地图的标准标记中删除阴影?

  19. 19

    如何使用JavaScript缩放此处所有的诺基亚地图标记存储在数组值中的标记

  20. 20

    是否可以对地图标签中的图像使用工具提示?

  21. 21

    在Google地图标记中显示多个字符

  22. 22

    将图像从Firebase存储到Google地图标记中

  23. 23

    在Google地图标记中显示多个字符

  24. 24

    引导程序中的地图标记和列表

  25. 25

    从 GeoJson 文件中显示一个地图标记

  26. 26

    如何使用Skobbler旋转地图标记

  27. 27

    使用json将infoWindow添加到地图标记

  28. 28

    如何使用 asynctask 从 URL 获取 Google 地图标记?

  29. 29

    非对称地图标记

热门标签

归档