加載熱圖LatLng從MySQL數據庫協調Google Maps API

-1

我有項目GIS。我想使用Google地圖API中的Google熱圖創建熱點犯罪地圖。我在MySQL數據庫上有一組犯罪地點（包括經度和緯度）的數據。我已閱讀Google Maps API Doc示例：https://developers.google.com/maps/documentation/javascript/heatmaplayer。加載熱圖LatLng從MySQL數據庫協調Google Maps API

有一個使用函數getPoints（）創建Heatmaps的例子，但LatLng硬編碼，而不是數據庫。任何可能的方式來從SQL數據庫和數組加載LatLng到新的google.maps.LatLng？

這是我的熱圖谷歌地圖API源代碼：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API&libraries=visualization&callback=initMap"> 
 

 
    <div id="floating-panel"> 
 
     <button onclick="toggleHeatmap()">Toggle Heatmap</button> 
 
     <button onclick="changeGradient()">Change gradient</button> 
 
     <button onclick="changeRadius()">Change radius</button> 
 
     <button onclick="changeOpacity()">Change opacity</button> 
 
    </div> 
 
    <div id="map"></div> 
 
    <script> 
 
     var map, heatmap; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 2, 
 
      center: {lat: 51.508530, lng: -0.076132}, 
 
      mapTypeId: 'satellite' 
 
     }); 
 
     heatmap = new google.maps.visualization.HeatmapLayer({ 
 
      data: getPoints(), 
 
      map: map 
 
     }); 
 
     } 
 
     function toggleHeatmap() { 
 
     heatmap.setMap(heatmap.getMap() ? null : map); 
 
     } 
 
     function changeGradient() { 
 
     var gradient = [ 
 
      'rgba(0, 255, 255, 0)', 
 
      'rgba(0, 255, 255, 1)', 
 
      'rgba(0, 191, 255, 1)', 
 
      'rgba(0, 127, 255, 1)', 
 
      'rgba(0, 63, 255, 1)', 
 
      'rgba(0, 0, 255, 1)', 
 
      'rgba(0, 0, 223, 1)', 
 
      'rgba(0, 0, 191, 1)', 
 
      'rgba(0, 0, 159, 1)', 
 
      'rgba(0, 0, 127, 1)', 
 
      'rgba(63, 0, 91, 1)', 
 
      'rgba(127, 0, 63, 1)', 
 
      'rgba(191, 0, 31, 1)', 
 
      'rgba(255, 0, 0, 1)' 
 
     ] 
 
     heatmap.set('gradient', heatmap.get('gradient') ? null : gradient); 
 
     } 
 
     function changeRadius() { 
 
     heatmap.set('radius', heatmap.get('radius') ? null : 20); 
 
     } 
 
     function changeOpacity() { 
 
     heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2); 
 
     } 
 

 
// This is the LatLng I meant, any possible way to load these from a database? 
 
     function getPoints() { 
 
     return [ 
 
      new google.maps.LatLng(40.761916,-73.9228569), 
 
      new google.maps.LatLng(42.35047,-71.07613), 
 
      new google.maps.LatLng(42.3456382751,-71.0715713501), 
 
      new google.maps.LatLng(42.3429222107,-71.078666687), 
 
      new google.maps.LatLng(42.3450012207,-71.0808029175), 
 
      new google.maps.LatLng(42.3429222107,-71.078666687), 
 
      new google.maps.LatLng(42.35521698,-71.0732955933), 
 
      new google.maps.LatLng(42.35521698,-71.0732955933), 
 
      new google.maps.LatLng(42.3903999329,-71.1128997803), 
 
      new google.maps.LatLng(42.3641662598,-71.0299758911), 
 
      new google.maps.LatLng(43.6952018738,-79.285987854), 
 
      new google.maps.LatLng(40.7427902222,-73.9834136963), 
 
      new google.maps.LatLng(43.6991958618,-79.2756347656), 
 
      new google.maps.LatLng(41.9590682983,-87.7312164307) 
 
     ] 
 
     } 
 
    </script>

來源

2017-04-26 Ulil Albab Rabbani

這裏就是他們得到座標從DB的例子：https://developers.google.com/maps/documentation/javascript/mysql-to-maps – duncan

你好@duncan是的，我已經成功創建從MySQL多種標記DB，但對於這個Heatmap情況可能有點不同，特別是在LatLng聲明 –

是的，你需要做以下幾點：

創建一個連接到數據庫的服務器端腳本並在您的經緯度表上運行查詢。
創建PHP代碼到結果格式化成JSON數組並把它扔出去，以瀏覽器爲JSON
請在客戶端調用Ajax從URL
獲取此JSON一旦阿賈克斯與有效的結果簡單地重複返回通過它並根據需要將它格式化爲類似的對象，就像你在getPoints函數中需要的一樣，而不是返回long數組，只需返回該對象即可。
觸發地圖刷新功能（您需要編寫該功能）可能基於包含您在4中創建的對象的參數，然後執行所有地圖功能。

來源

2017-04-26 10:38:19

因此，sql數據庫必須通過php代碼轉換爲Json格式？ –

它可以使用節點或任何服務器端技術進行轉換。您需要在服務器上執行SQL語句，然後格式化輸出。 –

加載熱圖LatLng從MySQL數據庫協調Google Maps API

回答

相關問題