根据坐标在地图上添加点、标注及热力图(百度地图API)

默认已知经纬度坐标点,放入坐标数组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




  • 6
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值