ヒートマップの視覚化のためのデータ配列としてのポリライン緯度/経度の保存方法

Question

ボタンクリックでヒートマップの視覚化のためのデータ配列としてusermadeポリラインパスを保存しようとしています。キャッチされない例外TypeError：現在、私は事前設定データとヒートマップを生成しようとしていることだし、それがエラーを与えるために起こる

プロパティを読み取ることができません「てsetMap」未定義のtoggleHeatmap

では、提供することができ、誰です解決策： 1 - プリセットデータで少なくともヒートマップ表示を行います。 2 - usermadeポリラインからデータをデータ配列に抽出します。

事前に感謝します。

<script> 

    var poly; 
    var map; 
    var markers = []; 
    var heatmap; 


    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 14, 
      center: {lat: 60.1675, lng: 24.9311}, 
      zoomControl: false, 
      scaleControl: false, 
      scrollwheel: false, 
      draggable: false, 
      disableDoubleClickZoom: true 
     }); 

     poly = new google.maps.Polyline({ 
      strokeColor: '#000000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2 
     }); 
     poly.setMap(map); 

     // Add a listener for the click event 
     map.addListener('click', addLatLng); 

     heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: getPoints(), 
      map: map 
     }); 
    } 


    function toggleHeatmap() { 

     heatmap.setMap(heatmap.getMap() ? null : map); 
    } 

    function getPoints() { 
     return [ 
      new google.maps.LatLng(60.1675, 24.9211), 
      new google.maps.LatLng(60.1675, 24.9212), 
      new google.maps.LatLng(60.1675, 24.9213) 
     ] 
    } 


    // Handles click events on a map, and adds a new point to the Polyline. 
    function addLatLng(event) { 
     var path = poly.getPath(); 
     path.push(event.latLng); 

     var marker = new google.maps.Marker({ 
      position: event.latLng, 
      title: '#' + path.getLength(), 
      map: map 
     }); 
     markers.push(marker); 
    } 

    // Sets the map on all markers in the array. 
    function setMapOnAll(map) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(map); 
     } 
    } 

    // Removes the markers from the map, but keeps them in the array. 
    function clearMarkers() { 
     setMapOnAll(null); 
    } 

    // Shows any markers currently in the array. 
    function showMarkers() { 
     setMapOnAll(map); 
    } 

    // Deletes all markers in the array by removing references to them. 
    function deleteMarkers() { 
     clearMarkers(); 
     markers = []; 
    } 

    //Function to remove lines 
    function removeLine() { 
     var path = poly.getPath(); 
     path.clear(); 

    } 

    function clearPath() { 
     removeLine(); 
     clearMarkers(); 
    } 


</script> 

Answer 1

この問題は、APIスクリプトによるものです。 APIキーの後に「&ライブラリ=視覚化」を追加する必要があります：

<script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"> 
</script>