9

HeatmapLayerAPIを使用していますhttps://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps

次のようにヒートマップを生成します。

heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    radius: 50
});
heatmap.setMap(google_map);

上記と同じ機能を使用して別のヒートマップを表示したい場合（ajaxを使用していて、表示する新しいマーカーがあるので、ヒートマップも変更する必要があります）、ヒートマップレイヤーはマップ上に残ります。この場合はiマップ上に2つの重複するヒートマップがあります。現在のヒートマップレイヤーを最初に削除するにはどうすればよいですか？

これが私のデモコードです。マップの下のリンクをクリックするとヒートマップが追加されます。もう一度クリックすると削除されますが、何度も何度も複製されます。

http://jsfiddle.net/LpL3P/

4

5 に答える 5

12

ドキュメントでは、を呼び出すことでレイヤーを削除できることが示唆されていますheatmap.setMap(null)

アップデート

jsfiddleでは、各イベントheatmapのスコープで変数を宣言していました。clickコードを機能させるために、変数をグローバルに存在するように移動し、新しい変数が既存の変数を上書きしないheatmapことを確認しました。heatmap

これが更新されたjsfiddleです

于 2012-12-31T17:47:24.897 に答える
5

元の投稿から数年後に解決策を探している他の人にとって、私は次のことがうまくいったことを発見しました。ヒートマップMVCObjectを保持するグローバルとして変数を宣言することから始めます。

var mvcObj;

次に、ヒートマップを追加するために使用する関数で

if( typeof( mvcObj )=='object' ) mvcObj.clear();
/* locations is an array of latlngs */
mvcObj = new google.maps.MVCArray( locations );

/* this.map is a reference to the map object */
var heatmap = new google.maps.visualization.HeatmapLayer({
    data: mvcObj,
    map: this.map
});
于 2015-10-29T11:30:59.963 に答える
3

グローバルに宣言する必要がありheatmapます。ヒートマップに新しいデータを表示する場合は、次のようにします。

let heatmap;

setData(heatmapData) {
    if (heatmap) {
      // Clear heatmap data
      heatmap.setMap(null);
      heatmap.setData([]);
    }
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData
    });

    heatmap.setMap(this.map);
}
于 2020-06-26T13:20:47.820 に答える
2

を使用heatmap.setMap(null)すると、ヒートマップレイヤーのみが非表示になります。後で入力heatmap.setMap(map)すると、ヒートマップレイヤーが再び表示されるため、実際には削除されませんでした。

データを削除するには、次の手順を実行する必要があります。

heatmap.setMap(null)//これによりヒートマップレイヤーが非表示になります

heatmap.getData().j = [];//これは実際に座標配列をゼロに設定するものです。

heatmap.setMap(map) //これで、マップを元に戻すと、ヒートレイヤーがなくなり、新しいヒートレイヤーを作成できます。

お役に立てれば。それを理解するのにしばらく時間がかかりましたが、それは間違いなく機能しました。

于 2015-08-21T00:00:26.077 に答える
1

ここでグーグルJSHeatMapsのドキュメントを見てください。

この例を確認してください。トグルボタンのロジックを表示できます。

heatmap.setMap(null)
于 2012-12-31T17:59:07.300 に答える