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