javascript - 更改缩放时更改 Bing 热图圆圈的半径

Question

我正在使用 Bing map 和热图。我成功显示了热图。我的问题有两个:

1. 如果用户双击 map ，它会放大，但我的热图圆圈的半径不会改变。有办法改变吗？

2. 如果用户选择控件上的+或-来放大或缩小，有没有办法捕获该事件，然后执行我在#1中要求的操作——更改半径的半径热图圆圈？v

这是我的 GetMap() 函数，它最初绘制 map 以及任何其他相关代码:

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。