关于javascript：从MySQL数据库加载Heatmap LatLng坐标Google Maps API


Load Heatmap LatLng Coordinates Google Maps API from MySQL database

我有项目GIS。 我想使用Google Maps API中的Google Heatmap创建热点犯罪地图。 我在MySQL数据库上有一堆设置犯罪位置(包括纬度和经度)的数据。 我已经阅读了Google Maps API文档示例：https://developers.google.com/maps/documentation/javascript/heatmaplayer。

有一个使用getPoints()函数创建Heatmaps的示例，但是使用LatLng进行了硬编码，而不是从数据库中创建。 从SQL数据库和数组将LatLng加载到新的google.maps.LatLng的任何可行方法？

这是我的Heatmap Google Maps API源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API&libraries=visualization&callback=initMap">

   
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>
      <button onclick="changeRadius()">Change radius</button>
      <button onclick="changeOpacity()">Change opacity</button>
   
   
   
      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)
        ]
      }

相关讨论

是的，您需要执行以下操作：

  • 创建一个服务器端脚本，该脚本连接到数据库并在经纬度表上运行查询。
  • 创建php代码以将结果格式化为json数组，并将其作为json丢给浏览器
  • 在客户端进行Ajax调用，以从网址获取此json
  • 一旦ajax返回了有效结果，则只需对其进行遍历，并在需要时将其格式化为与getPoints函数中所需的对象相似的对象，而不是返回long数组，只需返回该对象即可。
  • 触发地图刷新功能(您将需要编写此函数)可能基于包含您在4中创建的对象的参数，然后执行所有地图功能。
    • 相关讨论