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

默认已知经纬度坐标点,放入坐标数组pointArr,参照百度地图API在地图上添加点

// 编写自定义函数,创建标注
	function addMarker(point){
	  var marker = new BMap.Marker(point);
	  map.addOverlay(marker);
	}

添加标注

var content = "";
            content = content + "";
            content = content + "";
            content = content + "";
            content += "
姓名:"+jsonObject.personName+" "+jsonObject.personLevel+" "+jsonObject.personTag+"
时间:"+item.dateStr+"
地点:"+item.address+"
"; 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

这样就获得了带有权重的data,即selectedObjArr对象数组

效果图如下:

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

根据坐标在地图上添加点、标注及热力图(百度地图API)_第2张图片
完整js代码: https://download.csdn.net/download/u010782875/10289156




你可能感兴趣的:(JavaScript,百度地图,百度API,热力图,添加点及备注)