一庶橱、需求描述
表格中每一行數(shù)據(jù)均對應(yīng)地圖上一個坐標(biāo)點贮勃，要求：
1贪惹、在表格中選中一行時苏章，在地圖上對應(yīng)坐標(biāo)點被同步點亮，以區(qū)別其他坐標(biāo)點
2奏瞬、點擊地圖上坐標(biāo)點時枫绅，在表格中對應(yīng)數(shù)據(jù)行被同步選中，以區(qū)別表格中其他數(shù)據(jù)行硼端。
3并淋、地圖上多個坐標(biāo)點重合時，被點亮坐標(biāo)點自動顯示在最頂層珍昨；點擊此重合坐標(biāo)點县耽，等同于點擊該重合坐標(biāo)點中最頂層的那一個坐標(biāo)點。
1镣典、下圖為點標(biāo)記方式下的需求示意圖：
說明：點亮就是上圖中選中對應(yīng)行數(shù)據(jù)的點標(biāo)記顏色變?yōu)榧t色兔毙。
2、下圖為點聚合方式下的需求示意圖：
說明：上圖中有表格有8行數(shù)據(jù)兄春，對應(yīng)地圖上8個坐標(biāo)點澎剥，其中有3個坐標(biāo)點是重合的。
二赶舆、可選方案
解決以上需求哑姚，可選擇的方案有兩個：
1祭饭、點標(biāo)記Marker
所謂點標(biāo)記Marker，就是在地圖上指定的一個坐標(biāo)上打上一個Marker（如顯示一個水滴圖形叙量，或者自定義的其他任何圖形式）倡蝙，一個地圖上可以定義很多個Marker。
//1宛乃、創(chuàng)建Marker并顯示到地圖上悠咱，每個點創(chuàng)建一個Marker，放置到數(shù)組變量array_point中
征炼。析既。。谆奥。眼坏。。
array_point[i] = new window.AMap.Marker({
? ?position: [dataRes.data.data.rows[i].lon, dataRes.data.data.rows[i].lat],
? ? icon: "/statics/default.png",
? ? map: this.sys_map
?});
酸些。宰译。。魄懂。沿侈。。
//2市栗、啟用每個Marker上的click事件偵聽
array_point[i].on('click', function(e) {
? ? console.log(e.lnglat) ;
});
這種方式的優(yōu)點：可以清晰區(qū)分每個點缀拭，數(shù)據(jù)行和點標(biāo)記之間可以聯(lián)動。
這種方式的缺點：如果幾個坐標(biāo)相互之間非常近填帽，導(dǎo)致點標(biāo)記Marker重疊蛛淋，很難識別重疊了幾個坐標(biāo)點，分別是哪幾個點篡腌。
2褐荷、點聚合MarkerCluster
所謂點聚合MarkerCluster就是，在地圖縮小的一定比例時嘹悼，預(yù)定距離內(nèi)的點會自動合并成一個點顯示【上圖中有3數(shù)字的點就是一個聚合點叛甫，說明有3個坐標(biāo)合并的，并通過地圖提供的方法可以獲取到這個3個坐標(biāo)的清單】杨伙。點聚合本質(zhì)上是若干個點的集合其监，可以隨時往其中增、減點缀台，但無法針對其中的特定一個點進行個性化（如點亮）棠赛。
【注意，JSAPI1.0版本下點聚合不好用，2.0版本就能正常使用了】
//1睛约、創(chuàng)建點集合
.鼎俘。。辩涝。贸伐。。怔揩。
points.push({
?????weight: i,? ? //權(quán)重捉邢，可以不用
? ? ?lnglat: [dataRes.data.data.rows[i].lon, dataRes.data.data.rows[i].lat]
?});
。商膊。伏伐。。晕拆。藐翎。
//2、清楚點聚合示例中的點數(shù)據(jù)
if (this.sys_cluster) {
? ? this.sys_cluster.setData(null);
?};
//3实幕、創(chuàng)建并在地圖上顯示點聚合
that.sys_cluster = new window.AMap.MarkerCluster(that.sys_map, points, {
? ? ?gridSize: 80
});
//4吝镣、啟用點聚合上的click事件偵聽
this.sys_cluster.on("click", (e) => {
? ? console.log(e.clusterData);? //顯示單擊點標(biāo)記，顯示該點的坐標(biāo)清單昆庇，顯然對于單獨點末贾，則只顯示一個坐標(biāo)，如果是一個聚合點整吆，則顯示坐標(biāo)清單?
?});
這種方式的優(yōu)點：地圖上可以清晰看出哪些是單獨點拱撵？哪些是聚合點？每個聚合點聚合了多少個坐標(biāo)掂为？
這種方式的缺點：在地圖上無法點亮任意指定的一個坐標(biāo)點（這個坐標(biāo)點可能是一個單獨的坐標(biāo)點裕膀，也可能是一個聚合點中的某一個坐標(biāo)點）
三员串、解決方法
? ? 通過分析以上可選擇的方案勇哗，發(fā)現(xiàn)兩個方案都不能完全滿足需求：Marker方式難以取到重合點的點清單；MarkerColuster方式難以點亮指定一個坐標(biāo)點寸齐∮担【此事古難全，對于完美主義者來說渺鹦，這種揚棄性質(zhì)的選擇最是痛苦】
? ? 最終筆者選擇了Marker的方案扰法，思路如下：
? 1、點亮標(biāo)記毅厚，表格選中行的同時塞颁，對應(yīng)坐標(biāo)點的圖標(biāo)變?yōu)榧t色
? ?2、標(biāo)記置頂，點亮的標(biāo)記通過setzIndex置頂（對于單獨點沒有意義祠锣，但對于重合點酷窥，就有價值了）
? ?3、關(guān)閉點亮伴网，將上一個選中的點置暗蓬推，即恢復(fù)正常，不再處于點亮狀態(tài)澡腾。
? ? 對于重合點沸伏，在地圖上的無法選中指定一個點，也無法顯示點清單动分，更無法顯示重合點內(nèi)包含的點數(shù)量毅糟。但是可以通過表格選中某一行的方式，點亮地圖上的對應(yīng)坐標(biāo)點澜公，并將該坐標(biāo)點置頂留特，以便于在地圖上可以選中該點（選中的目的是方便后續(xù)邏輯，如通過彈出信息窗方式顯示該點的詳細(xì)信息）玛瘸。
? 如果有通過MarkerCluster能夠解決以上需求的方法蜕青，歡迎各位可以在留言區(qū)探討。
