默认已知经纬度坐标点,放入坐标数组pointArr,参照百度地图API在地图上添加点
// 编写自定义函数,创建标注
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
添加标注
var content = "<table>";
content = content + "<tr><td> 姓名:"+jsonObject.personName+" "+jsonObject.personLevel+" "+jsonObject.personTag+"</td></tr>";
content = content + "<tr><td> 时间:"+item.dateStr+"</td></tr>";
content = content + "<tr><td> 地点:"+item.address+"</td></tr>";
content += "</table>";
var infowindow = new BMap.InfoWindow(content);
marker.addEventListener("click",function(){
this.openInfoWindow(infowindow);
});
热力图
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":10, "visible":true, "opacity":70});
heatmapOverlay.setDataSet({data,max});//data是热力图的详细数据
heatmapOverlay.show();
其中
参数:
{Json Object} opts
可选的输入参数,非必填项。可输入选项包括:
{"radius" : {String} 热力图的半径,
"visible" : {Number} 热力图是否显示,
"gradient" : {JSON} 热力图的渐变区间,
"opacity" : {Number} 热力的透明度,
setDataSet(data)
设置热力图展现的详细数据, 实现之后,即可以立刻展现
参数:
{Json Object} data
{"max" : {Number} 权重的最大值,
"data" : {Array} 坐标详细数据,格式如下
{"lng":116.421969,"lat":39.913527,"count":3}, 其中
lng lat分别为经纬度, count权重值
addDataPoint(lng, lat, count)
添加热力图的详细坐标点
参数:
{Number} lng
经度坐标
{Number} lat
纬度坐标
{Number} count
权重
由于热力图需要权重count值,这里只知道经纬度坐标,故需要添加权重
权重可自行定义,我这里规定,在某一点规定半径范围内,相邻点越多距离越近权重越大。
半径:defaultDistance
初始权重:defaultCount
计算后的权重:count+=(defaultDistance-distance)/defaultDistance
代码如下:
var selectedObjArr = [];
var defaultDistance = 25000;
var defaultCount = 10;
var maxCount = defaultCount;
function heatPointArr(PointArr){
selectedObjArr = [];
var distance;
for(var i = 0;i<PointArr.length;i++){
var count = defaultCount;
for(var j = 0;j<PointArr.length-1;j++){
distance = map.getDistance(PointArr[j],PointArr[j+1]);
if( distance < defaultDistance){
count += (defaultDistance-distance)/defaultDistance;
}
}
if(maxCount<count){
maxCount = count;
}
var obj = {};
obj["lng"] = PointArr[i].lng;
obj["lat"] = PointArr[i].lat;
obj["count"] = Math.round(count);
selectedObjArr.push(obj);
}
}
这样就获得了带有权重的data,即selectedObjArr对象数组
效果图如下:
完整js代码: https://download.csdn.net/download/u010782875/10289156