根据坐标在地图上添加点、标注及热力图（百度地图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