从MySQL数据库加载Heatmap LatLng坐标Google Maps API

Question

I have project GIS. I want to create a hotspot crime mapping using Google Heatmap from Google Maps API. I have bunch of data of set crime location (including latitude and longitude) on MySQL database. I have read on Google Maps API Doc example: https://developers.google.com/maps/documentation/javascript/heatmaplayer .

There is an example creating Heatmaps using function getPoints(), but with LatLng hardcoded, not from a database. Any possible way to load LatLng from SQL database and array to new google.maps.LatLng?

This is my Heatmap Google Maps API source code:

 <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> 

Answer 1

Yes, You need to do following:

1. Create a server side script that connects to database and runs query on your lat lng table.
2. Create php code to format that result into a json array and throw it out to browser as json
3. Make an ajax call on client side to fetch this json from url
4. Once ajax has returned with valid results simply iterate through it and if needed format it to similar object as you need in your getPoints function and instead of return long array simply return that object.
5. Trigger the map refresh function (you will need to write this) may be based on a parameter that contains the object you created in 4 and then do all map functions.