我有项目gis。我想使用Google Map API的Google Heatmap创建一个热点犯罪映射。我在MySQL数据库上有大量犯罪位置(包括纬度和经度(的数据。我已经在Google Maps API上阅读了示例:https://developers.google.com/maps/documentation/javascript/heatmaplayer。
有一个示例使用函数getpoints((创建热图,但使用latlng硬编码,而不是来自数据库。从SQL数据库加载LATLNG的任何可能方法到新的Google.maps.latlng?
这是我的Heatmap Google Maps 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>
是的,您需要执行以下操作:
- 创建一个连接到数据库并在LAT LNG表上运行查询的服务器端脚本。
- 创建php代码以将导致json数组的格式化,然后将其扔给浏览器,为JSON
- 在客户端拨打Ajax,以从URL获取此JSON
- 一旦Ajax返回了有效的结果,只需迭代它,如果需要,则根据您在GetPoints功能中需要的格式为类似对象,而不是返回长数组,请简单地返回该对象。
- 触发地图刷新函数(您需要编写此(可能基于一个参数,该参数包含您在4中创建的对象,然后执行所有映射功能。