解决腾讯地图marker聚合后label不聚合的问题（转）

最新推荐文章于 2024-08-09 15:15:48 发布

三江春水

最新推荐文章于 2024-08-09 15:15:48 发布

阅读量1.5k

点赞数

分类专栏：腾讯地图文章标签：腾讯地图

腾讯地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

　　最近项目需要用到地图，因为是用于公众号，索性就用了腾讯地图。开发过程中新增一个需求：标注在缩小地图后要聚合。查看文档，实现起来并不难，照着文档做了之后发现marker是聚合了，但label没有聚合，这就很影响用户体验了，如下图：

　　在没有聚合之前只这样的：

　　没聚合的情况下是没毛病的。

　　但聚合之后就成这样了：

　　这样看起来很别扭吧，必须要让label也聚合才行。

　　继续查看文档，以为会有相关属性可以直接设置，结果没找到。文档没有找百度咯，寻寻觅觅也没找到个答案，没办法了，只能靠自己了。

　　还是看文档https://lbs.qq.com/javascript_v2/doc/marker.html，这里我发现了marker的一个事件：map_changed（当标注map属性更改时会触发此事件），当标注聚合或分离的时候可以出发这个事件。因此，我们可以利用这个来设置label的聚合与分离（实际就是设置label的显示隐藏）。那么如何设置label的显示隐藏呢，继续看文档https://lbs.qq.com/javascript_v2/doc/label.html，label有的setVisible方法可以设置label的显示隐藏。废话不多说，直接上代码（实际项目涉及内容比较多，这里就直接在官方给的案例中改了）案例地址https://lbs.qq.com/javascript_v2/case-run.html#overlay-markercluster

<!DOCTYPE>
<html>
<head>
    <title>MarkerCluster</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <style type="text/css">
        ul, li {
            margin: 0;
            padding: 0;
        }
    #map_canvas {
        position: absolute;
        left: 320px;
        min</span>-<span style="color: #000000">width: 800px;
        min</span>-<span style="color: #000000">height: 767px;
        border: 1px solid #ff0000;
    }

    #panel {
        position: relative;
        width: 300px;
        height: 500px;
        overflow: auto;
        border: 1px solid #</span>000000<span style="color: #000000">;
    }

    #attributeList li {
        border</span>-bottom: 1px dashed #999999<span style="color: #000000">;
        padding: 5px 5px;
        line</span>-<span style="color: #000000">height: 20px;
    }
</span>&lt;/style&gt;

</head>
<body “window.init()”>
<div id=“map_canvas”></div>
<div id=“panel”>

&lt;div&gt;<span style="color: #000000">
    设置属性：
    </span>&lt;ul id="attributeList"&gt;
        &lt;li&gt;
            &lt;span&gt;gridSize:&lt;/span&gt;
            &lt;select id="gridSize"&gt;
                &lt;option value="60" selected="selected"&gt;Default&lt;/option&gt;
                &lt;option value="40"&gt;40&lt;/option&gt;
                &lt;option value="50"&gt;50&lt;/option&gt;
                &lt;option value="70"&gt;70&lt;/option&gt;
                &lt;option value="80"&gt;80&lt;/option&gt;
                &lt;option value="500"&gt;500&lt;/option&gt;
            &lt;/select&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span&gt;maxZoom&lt;/span&gt;
            &lt;select id="maxZoom"&gt;
                &lt;option value="" selected="selected"&gt;Default&lt;/option&gt;
                &lt;option value="7"&gt;7&lt;/option&gt;
                &lt;option value="8"&gt;8&lt;/option&gt;
                &lt;option value="9"&gt;9&lt;/option&gt;
                &lt;option value="10"&gt;10&lt;/option&gt;
                &lt;option value="11"&gt;11&lt;/option&gt;
                &lt;option value="12"&gt;12&lt;/option&gt;
                &lt;option value="13"&gt;13&lt;/option&gt;
                &lt;option value="14"&gt;14&lt;/option&gt;
            &lt;/select&gt;

            &lt;div&gt;
                &lt;span&gt;当前地图级别：&lt;span id="mapZoomLevel"&gt;&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span&gt;averageCenter:&lt;/span&gt;
            &lt;label&gt;
                &lt;input id="averageCenter_true" type="radio" value="true" name="averageCenter"/&gt;
                &lt;span&gt;<span style="color: #0000ff">true</span>&lt;/span&gt;
            &lt;/label&gt;
            &lt;label&gt;
                &lt;input id="averageCenter_false" type="radio" value="false" name="averageCenter" checked="checked"/&gt;
                &lt;span&gt;<span style="color: #0000ff">false</span>&lt;/span&gt;
            &lt;/label&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span&gt;minimumClusterSize:&lt;/span&gt;
            &lt;select id="minimumClusterSize"&gt;
                &lt;option value="1"&gt;1&lt;/option&gt;
                &lt;option value="2" selected="selected"&gt;2&lt;/option&gt;
                &lt;option value="3"&gt;3&lt;/option&gt;
                &lt;option value="4"&gt;4&lt;/option&gt;
                &lt;option value="5"&gt;5&lt;/option&gt;
            &lt;/select&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span&gt;styles&lt;/span&gt;
            &lt;select id="styles"&gt;
                &lt;option value="" selected=""&gt;Default&lt;/option&gt;
                &lt;option value="People"&gt;People&lt;/option&gt;
                &lt;option value="Conversation"&gt;Conversation&lt;/option&gt;
            &lt;/select&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span&gt;zoomOnClick:&lt;/span&gt;
            &lt;label&gt;
                &lt;input id="zoomOnClick_true" type="radio" value="true" name="zoomOnClick" checked="checked"/&gt;
                &lt;span&gt;<span style="color: #0000ff">true</span>&lt;/span&gt;
            &lt;/label&gt;
            &lt;label&gt;
                &lt;input id="zoomOnClick_false" type="radio" value="false" name="zoomOnClick"/&gt;
                &lt;span&gt;<span style="color: #0000ff">false</span>&lt;/span&gt;
            &lt;/label&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;input id="addMarkerBt" type="button"  name="addMarkerBt" value='添加marker'/&gt;
            &lt;input id="addMarkersBt" type="button"  name="addMarkersBt" value='添加多个marker'/&gt;
            &lt;input id="removeMarkerBt" type="button"  name="removeMarkerBt" value='移除marker'/&gt;
            &lt;input id="removeMarkersBt" type="button"  name="removeMarkersBt" value='移除多个marker'/&gt;
            &lt;input id="clearMarkersBt" type="button"  name="clearMarkersBt" value='清除marker'/&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;hr/&gt;

</div>
<script type=“text/javascript”>
var markerIndex = 0;
var map;

function $(a) {
return document.getElementById(a);
}
var data = [
[39.959228, 116.367874],
[39.984486, 116.427612],
[39.988169, 116.279984],
[39.847558, 116.402893],
[39.941857, 116.383667],
[40.022882, 116.551208],
[39.819085, 116.581421],
[39.924482, 116.205826],
[39.757880, 116.162567],
[39.631606, 116.325989],
[39.797986, 116.415253],
[40.117990, 116.416626],
[40.271668, 116.638412],
[40.143190, 116.236038],
[39.928168, 116.515503],
[39.902362, 116.389160],
[39.935539, 116.377487]
];
window.init = function() {

</span><span style="color: #0000ff">var</span> Map =<span style="color: #000000"> qq.maps.Map;
</span><span style="color: #0000ff">var</span> Marker =<span style="color: #000000"> qq.maps.Marker;
</span><span style="color: #0000ff">var</span> LatLng =<span style="color: #000000"> qq.maps.LatLng;
</span><span style="color: #0000ff">var</span> Event =<span style="color: #000000"> qq.maps.event;

</span><span style="color: #0000ff">var</span> MarkerImage =<span style="color: #000000"> qq.maps.MarkerImage;
</span><span style="color: #0000ff">var</span> MarkerShape =<span style="color: #000000"> qq.maps.MarkerShape;
</span><span style="color: #0000ff">var</span> MarkerAnimation =<span style="color: #000000"> qq.maps.MarkerAnimation;
</span><span style="color: #0000ff">var</span> Point =<span style="color: #000000"> qq.maps.Point;
</span><span style="color: #0000ff">var</span> Size =<span style="color: #000000"> qq.maps.Size;
</span><span style="color: #0000ff">var</span> ALIGN =<span style="color: #000000"> qq.maps.ALIGN;

</span><span style="color: #0000ff">var</span> MVCArray =<span style="color: #000000"> qq.maps.MVCArray;
</span><span style="color: #0000ff">var</span> MarkerCluster =<span style="color: #000000"> qq.maps.MarkerCluster;
</span><span style="color: #0000ff">var</span> Cluster =<span style="color: #000000"> qq.maps.Cluster;
</span><span style="color: #0000ff">var</span> MarkerDecoration =<span style="color: #000000"> qq.maps.MarkerDecoration;

</span><span style="color: #0000ff">var</span> forEach = <span style="color: #0000ff">function</span><span style="color: #000000"> (array, fun) {
    </span><span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> i = 0, l = array.length; i &lt; l; ++<span style="color: #000000">i) {
        </span><span style="color: #0000ff">if</span> (fun(array[i], i) === <span style="color: #0000ff">false</span><span style="color: #000000">) {
            </span><span style="color: #0000ff">return</span> <span style="color: #0000ff">false</span><span style="color: #000000">;
        }
    }
};

</span><span style="color: #0000ff">var</span> latlng = <span style="color: #0000ff">new</span> LatLng(39.91, 116.38<span style="color: #000000">);
</span><span style="color: #0000ff">var</span> options =<span style="color: #000000"> {
    </span>'zoom':11<span style="color: #000000">,
    </span>'center'<span style="color: #000000">:latlng,
    </span>'mapTypeId':"roadmap"<span style="color: #000000">
};

</span><span style="color: #0000ff">var</span> map = <span style="color: #0000ff">new</span> Map($('map_canvas'<span style="color: #000000">), options);

</span><span style="color: #0000ff">var</span> markers = <span style="color: #0000ff">new</span><span style="color: #000000"> MVCArray();
</span><span style="color: #0000ff">var</span><span style="color: #000000"> markerCluster;

</span><span style="color: #0000ff">function</span><span style="color: #000000"> createCluster() {
    </span><span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> i = 0; i &lt; data.length; i++<span style="color: #000000">) {
        </span><span style="color: #0000ff">var</span> latLng = <span style="color: #0000ff">new</span> LatLng(data[i][0], data[i][1<span style="color: #000000">]);
        </span><span style="color: #0000ff">var</span> decoration = <span style="color: #0000ff">new</span> MarkerDecoration(i, <span style="color: #0000ff">new</span> Point(0, -5<span style="color: #000000">));
        </span><span style="color: #0000ff">var</span> marker = <span style="color: #0000ff">new</span><span style="color: #000000"> Marker({
            </span>'position'<span style="color: #000000">:latLng,
            map:map
        });
      let label </span>= <span style="color: #0000ff">new</span><span style="color: #000000"> qq.maps.Label({
            position: latLng,
            map: map,
            content: </span>'我是label'<span style="color: #000000">
        });
      <span style="background-color: #ffff00">qq.maps.event.addListener(marker, </span></span><span style="color: #000000; background-color: #ffff00">'map_changed', function(e) {
          if (e.target.isClustered) {
            console.log('聚合了')
            label.setVisible(false)
          } else {
            console.log('分开了')
            label.setVisible(true</span><span style="color: #000000"><span style="background-color: #ffff00">)
          }
        })</span>
        markers.push(marker);
    }

    markerClusterer </span>= <span style="color: #0000ff">new</span><span style="color: #000000"> MarkerCluster({
        map:map,
        minimumClusterSize:</span>2, <span style="color: #008000">//</span><span style="color: #008000">默认2</span>

markers:markers,
zoomOnClick:true, //默认为true
gridSize:30, //默认60
averageCenter:true, //默认false
maxZoom:18, //默认18
});

    Event.addListener(markerClusterer, </span>'clusterclick', <span style="color: #0000ff">function</span><span style="color: #000000"> (evt) {
        </span><span style="color: #008000">//</span><span style="color: #008000"> writeLog("mouse event", eventType);</span>
        <span style="color: #0000ff">var</span> ss =<span style="color: #000000">  evt;
        </span><span style="color: #008000">//</span><span style="color: #008000"> alert('点击了聚合点');</span>

});
};

createCluster();


</span><span style="color: #0000ff">var</span> imgPath = "./images/"<span style="color: #000000">;
</span><span style="color: #0000ff">var</span> Styles =<span style="color: #000000"> {
    </span>"People"<span style="color: #000000">:[
        {
            icon:</span><span style="color: #0000ff">new</span> MarkerImage(imgPath + "people35.png", <span style="color: #0000ff">new</span> Size(35, 35), <span style="color: #0000ff">new</span> Point(0, 0), <span style="color: #0000ff">new</span> Point(16, 0<span style="color: #000000">)),
            text:</span><span style="color: #0000ff">new</span> MarkerDecoration('&lt;font style="color:#ff00ff;font-size:10px;font-weight:bold;"&gt;{num}&lt;/font&gt;', <span style="color: #0000ff">new</span> Point(0, 5<span style="color: #000000">))
        }
    ],
    </span>"Conversation"<span style="color: #000000">:[
        {
            icon:</span><span style="color: #0000ff">new</span> MarkerImage(imgPath + "conv30.png", <span style="color: #0000ff">new</span> Size(30, 27), <span style="color: #0000ff">new</span> Point(0, 0), <span style="color: #0000ff">new</span> Point(3, 0<span style="color: #000000">)),
            text:</span><span style="color: #0000ff">new</span> MarkerDecoration('&lt;font style="color:#ff00ff;font-size:10px;font-weight:bold;"&gt;{num}&lt;/font&gt;', <span style="color: #0000ff">new</span> Point(0, -2<span style="color: #000000">))
        }
    ]
};



</span><span style="color: #0000ff">var</span><span style="color: #000000"> maker_add;

</span><span style="color: #0000ff">function</span><span style="color: #000000"> addMarker(index) {
    </span><span style="color: #0000ff">var</span> latLng = <span style="color: #0000ff">new</span> LatLng(39.849558,116.406893<span style="color: #000000">);
    </span><span style="color: #0000ff">var</span> decoration = <span style="color: #0000ff">new</span> MarkerDecoration(index, <span style="color: #0000ff">new</span> Point(0, -5<span style="color: #000000">));
    maker_add </span>= <span style="color: #0000ff">new</span><span style="color: #000000"> Marker({
        </span>'position'<span style="color: #000000">:latLng,
        decoration:decoration,
        map:map
    });
    markers.push(maker_add);

    markerClusterer.addMarker(maker_add);
}

</span><span style="color: #0000ff">var</span> markers_add =<span style="color: #000000"> [];

</span><span style="color: #0000ff">function</span><span style="color: #000000"> addMarkers() {
    </span><span style="color: #0000ff">var</span> bounds =<span style="color: #000000"> map.getBounds();
    </span><span style="color: #0000ff">var</span> sw =<span style="color: #000000"> bounds.getSouthWest();
    </span><span style="color: #0000ff">var</span> ne =<span style="color: #000000"> bounds.getNorthEast();
    </span><span style="color: #0000ff">var</span> lngSpan = Math.abs(sw.getLng() -<span style="color: #000000"> ne.getLng());
    </span><span style="color: #0000ff">var</span> latSpan = Math.abs(ne.getLat() -<span style="color: #000000"> sw.getLat());
    </span><span style="color: #0000ff">for</span> (<span style="color: #0000ff">var</span> i=0; i &lt; 100; i++<span style="color: #000000">) {
        </span><span style="color: #0000ff">var</span> position = <span style="color: #0000ff">new</span> qq.maps.LatLng(ne.getLat() - latSpan*(Math.random()*0.95), sw.getLng() + lngSpan*(Math.random()*0.95<span style="color: #000000">));
        
        </span><span style="color: #0000ff">var</span> decoration = <span style="color: #0000ff">new</span> MarkerDecoration(i, <span style="color: #0000ff">new</span> Point(0, -5<span style="color: #000000">));
        </span><span style="color: #0000ff">var</span> makeradd = <span style="color: #0000ff">new</span><span style="color: #000000"> Marker({
            </span>'position'<span style="color: #000000">:position,
            decoration:decoration,
            map:map
        });
          
        markers_add.push(makeradd);
    }
    
    markerClusterer.addMarkers(markers_add);
}

</span><span style="color: #0000ff">function</span><span style="color: #000000"> removeMarker() {
    markerClusterer.removeMarker(maker_add);
}

</span><span style="color: #0000ff">function</span><span style="color: #000000"> removeMarkers() {
    markerClusterer.removeMarkers(markers_add);
}

</span><span style="color: #0000ff">function</span><span style="color: #000000"> clearMarkers() {
    markerClusterer.clearMarkers();
}

</span><span style="color: #0000ff">function</span><span style="color: #000000"> setMarkerClusterOption(key, value) {
    markerClusterer.set(key, value);
}

</span><span style="color: #0000ff">var</span> setKeyHandle =<span style="color: #000000"> {
    </span>'gridSize': 'setGridSize'<span style="color: #000000">,
    </span>'maxZoom': 'setMaxZoom'<span style="color: #000000">,
    </span>'averageCenter' : 'setAverageCenter'<span style="color: #000000">
}; 

</span><span style="color: #0000ff">var</span> getKeyHandle =<span style="color: #000000"> {
    </span>'gridSize': 'getGridSize'<span style="color: #000000">,
    </span>'maxZoom': 'getMaxZoom'<span style="color: #000000">,
    </span>'averageCenter' : 'getAverageCenter'<span style="color: #000000">
};

</span><span style="color: #0000ff">var</span> gridSize = $("gridSize"<span style="color: #000000">);
Event.addDomListener(gridSize, </span>"change", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    setMarkerClusterOption(</span>"gridSize", parseInt(<span style="color: #0000ff">this</span><span style="color: #000000">.value));
});

</span><span style="color: #0000ff">var</span> maxZoom = $("maxZoom"<span style="color: #000000">);
Event.addDomListener(maxZoom, </span>"change", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    setMarkerClusterOption(</span>"maxZoom", <span style="color: #0000ff">this</span>.value ? parseInt(<span style="color: #0000ff">this</span>.value) : <span style="color: #0000ff">null</span><span style="color: #000000">);
});

</span><span style="color: #0000ff">var</span> addmarker = $("addMarkerBt"<span style="color: #000000">);
Event.addDomListener(addmarker, </span>"click", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    markerIndex</span>++<span style="color: #000000">;
    addMarker(markerIndex);
});

</span><span style="color: #0000ff">var</span> removeMarkerb = $("removeMarkerBt"<span style="color: #000000">);
Event.addDomListener(removeMarkerb, </span>"click", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    removeMarker();
});

</span><span style="color: #0000ff">var</span> addmarker = $("addMarkersBt"<span style="color: #000000">);
Event.addDomListener(addmarker, </span>"click", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    addMarkers();
});

</span><span style="color: #0000ff">var</span> removeMarkerb = $("removeMarkersBt"<span style="color: #000000">);
Event.addDomListener(removeMarkerb, </span>"click", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    removeMarkers();
});


</span><span style="color: #0000ff">var</span> clearMarkerb = $("clearMarkersBt"<span style="color: #000000">);
Event.addDomListener(clearMarkerb, </span>"click", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    clearMarkers();
});

</span><span style="color: #0000ff">var</span> minimumClusterSize = $("minimumClusterSize"<span style="color: #000000">);
Event.addDomListener(minimumClusterSize, </span>"change", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    setMarkerClusterOption(</span>"minimumClusterSize", parseInt(<span style="color: #0000ff">this</span><span style="color: #000000">.value));
});

</span><span style="color: #0000ff">var</span> averageCenter_true = $("averageCenter_true"<span style="color: #000000">);
Event.addDomListener(averageCenter_true, </span>"click", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    setMarkerClusterOption(</span>"averageCenter", <span style="color: #0000ff">true</span><span style="color: #000000">);
});

</span><span style="color: #0000ff">var</span> averageCenter_false = $("averageCenter_false"<span style="color: #000000">);
Event.addDomListener(averageCenter_false, </span>"click", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    setMarkerClusterOption(</span>"averageCenter", <span style="color: #0000ff">false</span><span style="color: #000000">);
});

</span><span style="color: #0000ff">var</span> zoomOnClick_true = $("zoomOnClick_true"<span style="color: #000000">);
Event.addDomListener(zoomOnClick_true, </span>"click", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    setMarkerClusterOption(</span>"zoomOnClick", <span style="color: #0000ff">true</span><span style="color: #000000">);
});

</span><span style="color: #0000ff">var</span> zoomOnClick_false = $("zoomOnClick_false"<span style="color: #000000">);
Event.addDomListener(zoomOnClick_false, </span>"click", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    setMarkerClusterOption(</span>"zoomOnClick", <span style="color: #0000ff">false</span><span style="color: #000000">);
});

</span><span style="color: #0000ff">var</span> stylesSelect = $("styles"<span style="color: #000000">);
Event.addDomListener(stylesSelect, </span>"change", <span style="color: #0000ff">function</span><span style="color: #000000"> () {
    setMarkerClusterOption(</span>"styles", Styles[<span style="color: #0000ff">this</span>.value] ? Styles[<span style="color: #0000ff">this</span>.value] : <span style="color: #0000ff">null</span><span style="color: #000000">);
});

};

</script>
</body>
</html>

　　上面代码中黄色部分就是设置label聚合分离的代码，效果如下：

　　这样体验就好多了。