角度谷歌热图半径在放大时减小

问题描述

我的地图运行良好，还分配了我的所有坐标，并且在我缩小时确实向我显示了热图。有超过26K个坐标将分配给热图。但是，当我放大地图时，点的颜色渐变的半径减小得太多，以致于我看不到确切的位置。

我尝试在开始时将半径设置为100，但是在放大时也不起作用。因此，我尝试创建一个事件侦听器，该事件监听器将更新每个用户将放大的半径，但是即使那样也很麻烦它无法正常工作。

这就是我想要做的

ngOnInit(): void {
    this.mapsApiLoader.load().then(() => {
      this.initMap();
    });
  }

  private filter(value: string) {
    const filterValue = value.toLowerCase();
    return this.cities.filter((state) =>
      state.name.toLowerCase().includes(filterValue)
    );
  }

  getHeatmapRadius(zoomLevel): number {
    let value: number;
    var someLatValue = 35.726332;
    var desiredRadiusInMeters = 1500;
    let metersPerPx =
      (156543.03392 * Math.cos((someLatValue * Math.PI) / 180)) /
      Math.pow(2,this.map.getZoom());
    console.log(desiredRadiusInMeters / metersPerPx);
    value = desiredRadiusInMeters / metersPerPx;
    return value;
  }

  initMap() {
    this.map = new google.maps.Map(this.gmapElement.nativeElement,{
      zoom: 8,center: new google.maps.LatLng(31.5204,74.3587),mapTypeId: "hybrid",zoomControl: true,streetViewControl: true,fullscreenControl: true,disableDefaultUI: true,scrollwheel: true,rotateControl: true,scaleControl: true,minZoom: 3.5,maxZoom: 18,});

    this.map.addListener("zoom_changed",() => {
      let value = new google.maps.visualization.HeatmapLayer();
      let rad = this.getHeatmapRadius(this.map.getZoom());

      console.log(rad);
      value.radius = rad;
      // console.log(value);
      console.log("listening");

      // this.heatmap.setMap(this.map);
      this.heatmap.setoptions(value);
    });

    this.getPoints();
  }

  getoptionText(option) {
    return option.name;
  }

  getPoints() {
    let lahoreId: string;
    this._systemService.cities$.subscribe((res) => {
      this.cities = res;
      lahoreId = this.cities.filter((city) => city.name === "Lahore")[0].id;
    });
    this._localStorage.getLocalStorageItem("pc_data").subscribe((res) => {
      this.vendorId = res["user"]["vendorId"];
      this._analyticsService
        .getCustomersLocations(lahoreId,this.vendorId)
        .subscribe((data) => {
          if (data) {
            var coord = [];
            data.forEach((cdata) => {
              coord.push(
                new google.maps.LatLng(
                  cdata.addressLocation.lat,cdata.addressLocation.lng
                )
              );
            });
            this.coordinates = coord;
            this.heatmap = new google.maps.visualization.HeatmapLayer({
              data: coord,map: this.map,radius: 100,dissipation: false,});
            console.log(this.heatmap);
            this.getData();
          }
        });
    });
  }

在getHeatMapRadius内，我试图增加半径值，但是在返回到该值时

let rad = this.getHeatmapRadius(this.map.getZoom());

没有分配给在addListener函数中定义的value变量，并且在控制台中显示错误radius is undefined。分配静态坐标值不会给我这个问题，但是在分配动态值时，它却无法按预期工作。

我需要知道如何确保放大时在地图上显示每个确切的点，以及是否还有其他方法可以避免此eventListener然后告诉我。这是一些示例坐标

 console.log([
      new google.maps.LatLng(31.393227,74.2859496),new google.maps.LatLng(31.5203696,74.35874729999999),]);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular-google-maps google-maps