Question

我正在使用Bing地图和热图。我成功地显示了热图。我的问题有两方面：

如果用户双击地图，则会放大，但我的热图圆的半径不会改变。有没有办法改变它？
如果用户选择控件上的+或 - 进行放大或缩小，是否有办法捕获该事件然后执行我在＃1中提出的要求 - 更改半径的半径热图圆圈？v

这是我最初绘制地图的GetMap（）函数以及任何其他相关代码：

var map;
var heatmapLayer;

function GetMap(myData) {
  /** If this is the first time the myData will be null so get all data **/

  if(myData == null){
    var myData = [];
    myData = myData.concat(HighRisk);
    myData = myData.concat(Ombuds);
  }
  map = new Microsoft.Maps.Map(document.getElementById("divMap"),
       { credentials: 'BING_MAPS_KEY',
         center: new Microsoft.Maps.Location(36,-40),
         mapTypeId: Microsoft.Maps.MapTypeId.road,
         labelOverlay: Microsoft.Maps.LabelOverlay.visible,
         zoom: 1
        });

  // Register and load the Client Side HeatMap Module
  Microsoft.Maps.registerModule("HeatMapModule", "js/heatmap.js");
  Microsoft.Maps.loadModule("HeatMapModule", { callback: function() {
  Microsoft.Maps.Events.addHandler(map, 'click', displayEventInfo);
    // Once the module is loaded, create a customised heatmap
    // by passing in various options as third parameter
    var myRadius = 400000;  


    heatmapLayer = new HeatMapLayer(
      map,
      myData,
      { intensity: 0.50, // "heat" at centre of each point
        radius: myRadius, // radius of affected area
        unit: "meters", // unit in which radius is measured
        showMapTypeSelector: false,
        colourgradient: {
          0.0: 'green',
          0.5: 'blue',
          0.75: 'orange',
          1.0: 'red'
        }
      });
  }});
  Microsoft.Maps.Location.prototype.multiplier = 50;

}

function displayEventInfo(e) {
      if (e.targetType == "map") {
          var point = new Microsoft.Maps.Point(e.getX(), e.getY());
          var loc = e.target.tryPixelToLocation(point);
          var options = map.getOptions();
          alert(map.getTargetZoom());

      }
  }

Answer 1

将单位选项设置为“像素”。这会将圆的大小保持为指定的像素数。你需要使半径更小，比如40。

在缩放变化时更改Bing热图圆的半径

1 个答案: