高德地圖點聚合改進
阿新 • • 發佈:2018-11-19
目錄
專案要求需要用到點聚合https://lbs.amap.com/api/javascript-api/example/marker/markerclusterer/←這種
複製下來照著葫蘆畫瓢就行,但這個葫蘆並不十分滿足我們的需求
最後的圈圈上顯示資訊
要在最後的圓圈上顯示資訊,只需要配置marker的MarkerOptions的content在裡邊加上文字可以。
content: '<div style="font-size:12px; color: yellow;background-color: hsla(180, 100%, 50%, 0.7);' + ' height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;">' + '<div style="transform:scale(0.8);margin-top: -30%">'+point_name[i]+'</div></div>',
賊jb醜,當然可以重新繪製一下marker的樣式,讓marker變成一個背景為白色的長方形,這是迫不得已的妥協。不要忘了點聚合的每一個點本身是一個Marker物件,是Marker物件就有屬性和方法https://lbs.amap.com/api/javascript-api/reference/overlay#marker
可以給Marker新增屬性
marker.point_name = point_name[i];
我給marker加一個point_name屬性值為這個marker的站點名稱,然後將這個marker推入陣列中,作為點聚合渲染的依據
for (var i = 0; i < points.length; i += 1) {
// markers.push(new AMap.Marker({
var marker = new AMap.Marker({
position: points[i]['lnglat'],
content: '<div style="font-size:12px; color: yellow;background-color: hsla(180, 100%, 50%, 0.7);' +
' height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;">' +
'<div style="transform:scale(0.8);margin-top: -30%">'+point_name[i]+'</div></div>',
offset: new AMap.Pixel(-15, -15)
})
marker.point_name = point_name[i];
markers.push(marker);
// )
}
迴圈遍歷給Marker新增事件,點選Marker的時候開啟資訊窗體
for(var i = 0; i<1500;i++) {
markers[i].on('mouseover', function (e) {
console.log(e.target.point_name);
infoWindow.setContent("<div style='background:rgba(255,255,255,0.71);width:150px;font-size:14px;padding:1px 10px 10px 10px'>" +
"<h3 style='text-align: center; margin-bottom: 4px'><span>" + e.target.point_name + "</span></h3>" +
"</div>");
infoWindow.open(map_pointPolymerization, e.lnglat);
})
}
當然資訊窗體也是高德地圖的一個內建物件https://lbs.amap.com/api/javascript-api/reference/infowindow/?sug_index=2
infoWindow = new AMap.InfoWindow({
isCustom: true, //是否自定義窗體
closeWhenClickMap: true, //是否在點選地圖後關閉窗體
draggable: true, //是否可拖動
offset: new AMap.Pixel(0, -20),
content: ""
});
完整程式碼
//點聚合
var cluster,markers = [];
$.ajax({
url: 'js/gdmap/data/線路渲染資料作為小車的依據.json', //全部公交線路
type: "get",
dataType: "json",
success: function (d) {
var arr_lnglat = [];
for(var i = 0,len = d.length; i < len; i++){
for(var j = 0,leng = d[i].points.length; j<leng; j++){
arr_lnglat.push(JSON.parse("{\"lnglat\":[\""+d[i].points[j].lnglat[0]+"\",\""+d[i].points[j].lnglat[1]+"\"]}"));
}
}
var arr_point_name = [];
for(var i = 0,len = d.length; i < len; i++){
for(var j = 0,leng = d[i].points.length; j<leng; j++){
arr_point_name.push(d[i].points[j].name);
}
}
console.log(arr_point_name[6])
var points = arr_lnglat;
window.point_name = arr_point_name;
for (var i = 0; i < points.length; i += 1) {
// markers.push(new AMap.Marker({
var marker = new AMap.Marker({
position: points[i]['lnglat'],
content: '<div style="font-size:12px; color: yellow;background-color: hsla(180, 100%, 50%, 0.7);' +
' height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;">' +
'<div style="transform:scale(0.8);margin-top: -30%">'+point_name[i]+'</div></div>',
offset: new AMap.Pixel(-15, -15)
})
marker.point_name = point_name[i];
markers.push(marker);
// )
}
}
})
function addCluster(tag) {
if (cluster) {
cluster.setMap(null);
}if (tag == 1) {//自定義圖示
var sts = [{
url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/green.png",
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -16)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
size: new AMap.Size(36, 36),
offset: new AMap.Pixel(-18, -18)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/red.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24)
}, {
url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
size: new AMap.Size(48, 48),
offset: new AMap.Pixel(-24, -24)
}];
cluster = new AMap.MarkerClusterer(map_pointPolymerization, markers, {
styles: sts,
gridSize: 50
});
} else {//預設樣式
cluster = new AMap.MarkerClusterer(map_pointPolymerization, markers, {
gridSize: 50
});
console.log(point_name[2]);
for(var i = 0; i<1500;i++) {
markers[i].on('mouseover', function (e) {
console.log(e.target.point_name);
infoWindow.setContent("<div style='background:rgba(255,255,255,0.71);width:150px;font-size:14px;padding:1px 10px 10px 10px'>" +
"<h3 style='text-align: center; margin-bottom: 4px'><span>" + e.target.point_name + "</span></h3>" +
"</div>");
infoWindow.open(map_pointPolymerization, e.lnglat);
})
}
}
}
setTimeout(function () {
addCluster(0)
},1000)
//點聚合END
最終效果
點選小圓圈的時候彈出infowindow