如何使用Google Maps JS API从热图转换为可点击标记？ [英] How do you switch from heatmap to clickable markers with Google Maps JS API?
本文介绍了如何使用Google Maps JS API从热图转换为可点击标记？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想为我的数据的初始视图提供热图，但是当某个人滚动靠近时，我希望热图更改为可点击的标记。现在它加载两个。
Javascript：
<脚本>
var map;
函数initMap（）{
var infowindow = new google.maps.InfoWindow（）;
var mapDiv = document.getElementById（'map'）;
var map = new google.maps.Map（mapDiv，{
center：{lat：39.2888414，lng：-76.6099112}，
zoom：12
}）;
$ b google.maps.event.addListener（map，'click'，function（）{
infowindow.close（）;
}）;
map.data.loadGeoJson（'https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING'）;
map.data.loadGeoJson（'https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=HOMICIDE'）;
var data;
$ .ajax（{
dataType：json，
url：https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING，
data：data，
success：letsGo
}）;
var JSONLoaded;
var latLngList = [];
var heatMapData = [];
函数letsGo（mapData）{
console.log（mapData.features.length）;
for（i = 0; i< mapData.features.length; i ++）{
tempLocation = mapData.features [i]
latLngList.push（tempLocation.geometry。坐标）;
//console.log (latLngList）;
}
console.log（latLngList）;
console.log（latLngList.length）;
for（i = 0; i
var tempLong = latLngList [i] [0];
var tempVar = new google.maps.LatLng（tempLat，tempLong）;
heatMapData.push（new google.maps.LatLng（tempLat，tempLong））;
// console.log（tempLat）;
// console.log（tempLong）;
}
var pointArray = new google.maps.MVCArray（heatMapData）;
console.log（pointArray）;
var heatmap = new google.maps.visualization.HeatmapLayer（{
data：pointArray
}）;
console.log（got to heatmap）;
heatmap.setMap（map）;
}
map.data.addListener（'click'，function（event）{
infowindow.setContent（event.feature.getProperty（'description'）+< （'crimedate'））;
infowindow.setPosition（event.latLng）;
infowindow.setOptions（{pixelOffset：new google.maps.Size（0， - 34）}）;
infowindow.open（map）;
}）;
google.maps.event.addDomListener（window，'load'，initMap）;
}
< / script>
解决方案
var map; var initmap（） {var infowindow = new google.maps.InfoWindow（）; var mapDiv = document.getElementById（'map'）; map = new google.maps.Map（mapDiv，{center：{lat：39.2888414，lng：-76.6099112}，zoom：12}）; google.maps.event.addListener（map，'zoom_changed'，function（）{var zoom = map.getZoom（）; if（zoom> 12）{//隐藏热图，显示标记heatmap.setMap（null） ; map.data.setMap（map）;} else {//隐藏标记，显示热图heatmap.setMap（map）; map.data.setMap（null）;}}）google.maps.event.addListener（map ，'click'，function（）{infowindow.close（）;}）; // map.data.loadGeoJson（'https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING'）; map.data.addGeoJson（geoJsonShooting）; // map.data.loadGeoJson（'https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=HOMICIDE'）; var数据; / * $ .ajax（{dataType：json，url：https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING，data：data，success：letsGo}）; * / var JSONLoaded; var latLngList = []; var heatMapData = [];函数letsGo（mapData）{// console.log（mapData.features.length）; for（i = 0; i< mapData.features.length; i ++）{tempLocation = mapData.features [i] latLngList.push（tempLocation.geometry.coordinates）; //console.log(latLngList）; } // console.log（latLngList）; // console.log（latLngList.length）; for（i = 0; i
在地图中添加侦听器 zoom_changed 事件。当缩放级别增加到阈值以上时，隐藏热图并显示标记（反之亦然）。
google.maps。 event.addListener（map，'zoom_changed'，function（）{
var zoom = map.getZoom（）;
if（zoom> 12）{
//隐藏热图，显示标记
heatmap.setMap（null）;
map.data.setMap（map）;
} else {
//隐藏标记，显示热图
heatmap.setMap（map）;
map.data.setMap（null）;
}
}）
代码段：
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
I want to have a heat map for the initial view of my data, but when someone scrolls closer in, I want the heatmap to change to clickable markers. Right now it loads both. How do I make it change?
Javascript:
<script>
var map;
function initMap() {
var infowindow = new google.maps.InfoWindow();
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 39.2888414, lng: -76.6099112},
zoom: 12
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
map.data.loadGeoJson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING');
map.data.loadGeoJson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=HOMICIDE');
var data;
$.ajax({
dataType: "json",
url: "https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING",
data: data,
success: letsGo
});
var JSONLoaded;
var latLngList = [];
var heatMapData = [];
function letsGo(mapData){
console.log(mapData.features.length);
for (i=0; i < mapData.features.length; i++){
tempLocation = mapData.features[i]
latLngList.push(tempLocation.geometry.coordinates);
//console.log(latLngList);
}
console.log(latLngList);
console.log(latLngList.length);
for (i=0; i < latLngList.length; i++){
var tempLat = latLngList[i][1];
var tempLong = latLngList[i][0];
var tempVar = new google.maps.LatLng(tempLat, tempLong);
heatMapData.push(new google.maps.LatLng(tempLat, tempLong));
// console.log(tempLat);
// console.log(tempLong);
}
var pointArray = new google.maps.MVCArray(heatMapData);
console.log(pointArray);
var heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
console.log("got to heatmap");
heatmap.setMap(map);
}
map.data.addListener('click', function(event) {
infowindow.setContent(event.feature.getProperty('description')+"<br>"+event.feature.getProperty('crimedate'));
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
google.maps.event.addDomListener(window, 'load', initMap);
}
</script>
解决方案
Add a listener to the map zoom_changed event. when the zoom level increases above your threshold, hide the heatmap and show the markers (and vice versa).
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
if (zoom > 12) {
// hide the heatmap, show the markers
heatmap.setMap(null);
map.data.setMap(map);
} else {
// hide the markers, show the heatmap
heatmap.setMap(map);
map.data.setMap(null);
}
})
code snippet:
var map;
var heatmap;
function initMap() {
var infowindow = new google.maps.InfoWindow();
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {
center: {
lat: 39.2888414,
lng: -76.6099112
},
zoom: 12
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
if (zoom > 12) {
// hide the heatmap, show the markers
heatmap.setMap(null);
map.data.setMap(map);
} else {
// hide the markers, show the heatmap
heatmap.setMap(map);
map.data.setMap(null);
}
})
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// map.data.loadGeoJson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING');
map.data.addGeoJson(geoJsonShooting);
// map.data.loadGeoJson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=HOMICIDE');
var data;
/* $.ajax({
dataType: "json",
url: "https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING",
data: data,
success: letsGo
});
*/
var JSONLoaded;
var latLngList = [];
var heatMapData = [];
function letsGo(mapData) {
// console.log(mapData.features.length);
for (i = 0; i < mapData.features.length; i++) {
tempLocation = mapData.features[i]
latLngList.push(tempLocation.geometry.coordinates);
//console.log(latLngList);
}
// console.log(latLngList);
// console.log(latLngList.length);
for (i = 0; i < latLngList.length; i++) {
var tempLat = latLngList[i][1];
var tempLong = latLngList[i][0];
var tempVar = new google.maps.LatLng(tempLat, tempLong);
heatMapData.push(new google.maps.LatLng(tempLat, tempLong));
// console.log(tempLat);
// console.log(tempLong);
}
var pointArray = new google.maps.MVCArray(heatMapData);
// console.log(pointArray);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
console.log("got to heatmap");
heatmap.setMap(map);
map.data.setMap(null);
}
map.data.addListener('click', function(event) {
infowindow.setContent(event.feature.getProperty('description') + "<br>" + event.feature.getProperty('crimedate'));
infowindow.setPosition(event.latLng);
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -34)
});
infowindow.open(map);
});
letsGo(geoJsonShooting);
}
google.maps.event.addDomListener(window, 'load', initMap);
// reduced size of data set to fit in post
var geoJsonShooting = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.67129, 39.33763]
},
"properties": {
"crimedate": "2016-02-09T00:00:00.000",
"post": "613",
"location_1_address": null,
"location": "3000 W COLD SPRING LA",
"description": "SHOOTING",
"neighborhood": "Towanda-Grantley",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "NORTHWESTERN",
"crimetime": "1612"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.59531, 39.28513]
},
"properties": {
"crimedate": "2016-02-10T00:00:00.000",
"post": "213",
"location_1_address": null,
"location": "500 S BOND ST",
"description": "SHOOTING",
"neighborhood": "Fells Point",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHEASTERN",
"crimetime": "0135"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.59531, 39.28513]
},
"properties": {
"crimedate": "2016-02-10T00:00:00.000",
"post": "213",
"location_1_address": null,
"location": "500 S BOND ST",
"description": "SHOOTING",
"neighborhood": "Fells Point",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHEASTERN",
"crimetime": "0135"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.68361, 39.34287]
},
"properties": {
"crimedate": "2016-02-07T00:00:00.000",
"post": "623",
"location_1_address": null,
"location": "4100 W BELVEDERE AV",
"description": "SHOOTING",
"neighborhood": "Woodmere",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "NORTHWESTERN",
"crimetime": "1845"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.70401, 39.28251]
},
"properties": {
"crimedate": "2016-02-01T00:00:00.000",
"post": "823",
"location_1_address": null,
"location": "200 BOSWELL RD",
"description": "SHOOTING",
"neighborhood": "Westgate",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHWESTERN",
"crimetime": "1818"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.67611, 39.28487]
},
"properties": {
"crimedate": "2016-02-27T00:00:00.000",
"post": "842",
"location_1_address": null,
"location": "100 S MORLEY ST",
"description": "SHOOTING",
"neighborhood": "Saint Josephs",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHWESTERN",
"crimetime": "1721"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.63785, 39.31029]
},
"properties": {
"crimedate": "2016-01-08T00:00:00.000",
"post": "733",
"location_1_address": null,
"location": "1200 W NORTH AV",
"description": "SHOOTING",
"neighborhood": "Penn North",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "WESTERN",
"crimetime": "1852"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.55906, 39.34631]
},
"properties": {
"crimedate": "2016-02-25T00:00:00.000",
"post": "426",
"location_1_address": null,
"location": "3400 ECHODALE AV",
"description": "SHOOTING",
"neighborhood": "Waltherson",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "NORTHEASTERN",
"crimetime": "1227"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.67444, 39.30995]
},
"properties": {
"crimedate": "2013-07-13T00:00:00.000",
"post": "812",
"location_1_address": null,
"location": "3400 WALBROOK AV",
"description": "SHOOTING",
"neighborhood": "Mount Holly",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHWESTERN",
"crimetime": "2128"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.53564, 39.35372]
},
"properties": {
"crimedate": "2016-02-25T00:00:00.000",
"post": "425",
"location_1_address": null,
"location": "6400 BROOK AV",
"description": "SHOOTING",
"neighborhood": "Rosemont East",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "NORTHEASTERN",
"crimetime": "1933"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.65021, 39.28703]
},
"properties": {
"crimedate": "2016-02-04T00:00:00.000",
"post": "842",
"location_1_address": null,
"location": "2100 HOLLINS ST",
"description": "SHOOTING",
"neighborhood": "Boyd-Booth",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHWESTERN",
"crimetime": "1224"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.59893, 39.29428]
},
"properties": {
"crimedate": "2014-05-17T00:00:00.000",
"post": "212",
"location_1_address": null,
"location": "200 N EDEN ST",
"description": "SHOOTING",
"neighborhood": "Dunbar-Broadway",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHEASTERN",
"crimetime": "0146"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.64921, 39.28469]
},
"properties": {
"crimedate": "2011-04-05T00:00:00.000",
"post": "934",
"location_1_address": null,
"location": "200 HARMISON ST",
"description": "SHOOTING",
"neighborhood": "Carrollton Ridge",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHERN",
"crimetime": "0146"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.64921, 39.28469]
},
"properties": {
"crimedate": "2011-04-05T00:00:00.000",
"post": "934",
"location_1_address": null,
"location": "200 HARMISON ST",
"description": "SHOOTING",
"neighborhood": "Carrollton Ridge",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHERN",
"crimetime": "0146"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.64921, 39.28469]
},
"properties": {
"crimedate": "2011-04-05T00:00:00.000",
"post": "934",
"location_1_address": null,
"location": "200 HARMISON ST",
"description": "SHOOTING",
"neighborhood": "Carrollton Ridge",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHERN",
"crimetime": "0146"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.62384, 39.29182]
},
"properties": {
"crimedate": "2015-07-12T00:00:00.000",
"post": "121",
"location_1_address": null,
"location": "200 N GREENE ST",
"description": "SHOOTING",
"neighborhood": "University Of Maryland",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "CENTRAL",
"crimetime": "0512"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.62579, 39.29688]
},
"properties": {
"crimedate": "2016-02-16T00:00:00.000",
"post": "143",
"location_1_address": null,
"location": "600 N MARTIN L KING JR BLVD",
"description": "SHOOTING",
"neighborhood": "Seton Hill",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "CENTRAL",
"crimetime": "1817"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.59842, 39.31605]
},
"properties": {
"crimedate": "2016-02-19T00:00:00.000",
"post": "342",
"location_1_address": null,
"location": "2300 AIKEN ST",
"description": "SHOOTING",
"neighborhood": "East Baltimore Midway",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "EASTERN",
"crimetime": "1239"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.59842, 39.31605]
},
"properties": {
"crimedate": "2016-02-19T00:00:00.000",
"post": "342",
"location_1_address": null,
"location": "2300 AIKEN ST",
"description": "SHOOTING",
"neighborhood": "East Baltimore Midway",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "EASTERN",
"crimetime": "1239"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.60933, 39.34107]
},
"properties": {
"crimedate": "2011-04-26T00:00:00.000",
"post": "524",
"location_1_address": null,
"location": "500 E 43RD ST",
"description": "SHOOTING",
"neighborhood": "Wilson Park",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "NORTHERN",
"crimetime": "0150"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.67385, 39.28643]
},
"properties": {
"crimedate": "2016-02-27T00:00:00.000",
"post": "842",
"location_1_address": null,
"location": "3400 W CATON AV",
"description": "SHOOTING",
"neighborhood": "Saint Josephs",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHWESTERN",
"crimetime": "1345"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.63108, 39.30639]
},
"properties": {
"crimedate": "2013-02-12T00:00:00.000",
"post": "132",
"location_1_address": null,
"location": "1700 MADISON AV",
"description": "SHOOTING",
"neighborhood": "Madison Park",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "CENTRAL",
"crimetime": "1929"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.53242, 39.33067]
},
"properties": {
"crimedate": "2013-01-31T00:00:00.000",
"post": "441",
"location_1_address": null,
"location": "5900 RADECKE AV",
"description": "SHOOTING",
"neighborhood": "Cedonia",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "NORTHEASTERN",
"crimetime": "2136"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.67429, 39.311]
},
"properties": {
"crimedate": "2016-02-22T00:00:00.000",
"post": "812",
"location_1_address": null,
"location": "3400 CLIFTON AV",
"description": "SHOOTING",
"neighborhood": "Mount Holly",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "SOUTHWESTERN",
"crimetime": "1305"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.66198, 39.34353]
},
"properties": {
"crimedate": "2011-04-26T00:00:00.000",
"post": "532",
"location_1_address": null,
"location": "4500 LANIER AV",
"description": "SHOOTING",
"neighborhood": "Parklane",
"total_incidents": "1",
"location_1_city": null,
"location_1_state": null,
"crimecode": "9S",
"weapon": "FIREARM",
"location_1_zip": null,
"district": "NORTHERN",
"crimetime": "2316"
}
}],
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
}
};
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<div id="map"></div>
这篇关于如何使用Google Maps JS API从热图转换为可点击标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
