腾讯地图聚合点下的Marker点击事件⾃⼰开发项⽬遇到的⼩问题：
1、聚合点下如何添加Marker点的点击事件
2、腾讯地图的实例是H5的⾃⼰实⼒不济转成vue的时候会出现报错，⼤家可以⼀起探讨
关键点：
1、在创建点标记图层后才可以设置点击事件
marker = new TMap.MultiMarker
//监听marker点击事件
<("click", eventClick)
//创建点击事件
var eventClick = function (evt) { console.ry.id) }
接下来是代码（H5）复制粘贴就能⽤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>⾃定义点聚合功能</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#mapContainer {
position: relative;
height: 100%;
width: 100%;
}
.clusterBubble {
border-radius: 50%;
color: #fff;
font-weight: 500;
text-align: center;
opacity: 0.88;
background-image: linear-gradient(139deg, #ff3d66 0%, #ff3574 100%);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.20);
position: absolute;
top: 0px;
left: 0px;
}
.locicon {
position: absolute;
bottom: 20px;
right: 15px;
width: 50px;
height: 50px;
z-index: 10000;
}
</style>
</head>
<script charset="utf-8" src="map.qq/api/gljs?p&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<body onload="init()">
<div id='mapContainer'></div>
<img class="locicon" onclick="setCenter()" src="./icon_location_s.png" alt="">
<script>
var map;
var center = new TMap.LatLng(39.953416, 116.380945);
var ClusterBubbleClick;
function init() {
var drawContainer = ElementById('mapContainer');
map = new TMap.Map('mapContainer', {
zoom: 16.5,
minZoom: 10,            //此处设置地图的缩放级别最⼩值
maxZoom: 17,          //此处设置地图的缩放级别最⼤值
pitch: 0,
center: center,
mapStyleId: 'style 1'
});
// 创建点聚合
var markerCluster = new TMap.MarkerCluster({
id: 'cluster',
map: map,
enableDefaultStyle: false, // 关闭默认样式
minimumClusterSize: 3,
geometries: [{ // 点数组
position: new TMap.LatLng(39.953416, 116.480945)
},
{
position: new TMap.LatLng(39.984104, 116.407503)
},
{
position: new TMap.LatLng(39.908802, 116.497502)
},
{
position: new TMap.LatLng(40.040417, 116.373514)
},
{
position: new TMap.LatLng(39.953416, 116.380945)
},
{
position: new TMap.LatLng(39.984104, 116.307503)
},
{
position: new TMap.LatLng(39.908802, 116.397502)
},
{
position: new TMap.LatLng(40.040417, 116.273514)
},
],
zoomOnClick: true,
gridSize: 60,
averageCenter: false
});
var clusterBubbleList = [];
var markerGeometries = [];
var marker = null;// 监听聚合簇变化
<('cluster_changed', function (e) {
/
/ 销毁旧聚合簇⽣成的覆盖物
if (clusterBubbleList.length) {
clusterBubbleList.forEach(function (item) {
item.destroy();
})
clusterBubbleList = [];
}
markerGeometries = [];
// 根据新的聚合簇数组⽣成新的覆盖物和点标记图层
var clusters = Clusters();
clusters.forEach(function (item) {
if (ries.length > 1) {
let clusterBubble = new ClusterBubble({
map,
position: ,
content: ries.length,
});
<('click', () => {
map.fitBounds(item.bounds);
});
clusterBubbleList.push(clusterBubble);
go2map地图北京} else {
markerGeometries.push({
position:
});
}
});
if (marker) {
// 已创建过点标记图层，直接更新数据
marker.setGeometries(markerGeometries);
} else {
// 创建点标记图层
marker = new TMap.MultiMarker({
map,
styles: {
default: new TMap.MarkerStyle({
'width': 50,
'height': 50,
'anchor': {
x: 17,
y: 21,
},
'src': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAABqCAYAAABUIcSXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bX                            }),
},
geometries: markerGeometries
});
//监听marker点击事件
<("click", eventClick)
}
});
var eventClick = function (evt) {
console.ry.id)
}
//添加坐标
markerCluster.updateGeometries(
[
{
"styleId": "marker",
"id": "4",
"position": new TMap.LatLng(39.994104, 116.287503),
}
]
)
var circle = new TMap.MultiCircle({
map,
styles: {
// 设置圆形样式
circle: new TMap.CircleStyle({
color: 'rgba(255, 61, 102, 0.08)',
showBorder: true,
borderColor: 'rgba(255,255,255,1)',
borderWidth: 1
})
},
geometries: [
{
styleId: 'circle',
center: center,
radius: 200
}
]
})
}
// 以下代码为基于DOMOverlay实现聚合点⽓泡
//设置地图中⼼点事件
function setCenter() {
map.easeTo({ zoom: 16.5, rotation: 0, center: center }, { duration: 1000 });//平滑缩放，旋转到指定级别
}
function ClusterBubble(options) {
TMap.DOMOverlay.call(this, options);
}
ClusterBubble.prototype = new TMap.DOMOverlay();
Init = function (options) {
this.position = options.position;
};
// 销毁时需要删除
Destroy = function () {
veEventListener('click', Click);
};
Click = function () {
};
// 创建⽓泡DOM元素
ateDOM = function () { var dom = ateElement('div');
dom.classList.add('clusterBubble');
dom.innerText = t;
dom.style.cssText = [
'width: ' + (40 + t) * 2) + 'px;',
'height: ' + (40 + t) * 2) + 'px;',
'line-height: ' + (40 + t) * 2) + 'px;',            ].join('');
// 监听点击事件，实现zoomOnClick
dom.addEventListener('click', Click);
return dom;
};
ClusterBubble.prototype.updateDOM = function () { if (!this.map) {
return;
}
/
/ 经纬度坐标转容器像素坐标
let pixel = this.map.projectToContainer(this.position);
// 使⽂本框中⼼点对齐经纬度坐标点
let left = X() - this.dom.clientWidth / 2 + 'px';
let top = Y() - this.dom.clientHeight / 2 + 'px';
this.ansform = `translate(${left}, ${top})`;
};
window.ClusterBubble = ClusterBubble;
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。