我正在尝试将Heatmaps图层加载到我的谷歌地图上,但出于某种原因,我只是不断收到错误“无法读取未定义的属性'HeatmapLayer'。”
map = new google.maps.Map(document.getElementById("gmaps"),{
zoom: 11,
center: new google.maps.LatLng(39.788403, -86.19990800000001),
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false
});
heatMapData = [
new google.maps.LatLng(39.77745056152344, -86.10900878906250),
new google.maps.LatLng(39.82060623168945, -86.17008972167969),
new google.maps.LatLng(39.77947616577148, -86.17008972167969),
new google.maps.LatLng(39.82987594604492, -86.13955688476562),
new google.maps.LatLng(39.74195098876953, -86.12429046630860)
];
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData,
map: map
});
这是jsFiddle:http://jsfiddle.net/9HQ2a/3/
答案 0 :(得分:26)
在加载Google地图js时,将可视化库添加到网址。
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script>
答案 1 :(得分:0)
根据 Google's documentation 的说法,可视化类是一个独立的库,独立于主要的 Maps JavaScript API 代码。您必须首先使用库参数加载它。
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>
<script>
function initMap() {
/* Data points defined as an array of LatLng objects */
var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(37.782, -122.445),
new google.maps.LatLng(37.782, -122.443),
new google.maps.LatLng(37.782, -122.441),
new google.maps.LatLng(37.782, -122.439),
new google.maps.LatLng(37.782, -122.437),
new google.maps.LatLng(37.782, -122.435),
new google.maps.LatLng(37.785, -122.447),
new google.maps.LatLng(37.785, -122.445),
new google.maps.LatLng(37.785, -122.443),
new google.maps.LatLng(37.785, -122.441),
new google.maps.LatLng(37.785, -122.439),
new google.maps.LatLng(37.785, -122.437),
new google.maps.LatLng(37.785, -122.435)
];
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
map = new google.maps.Map(document.getElementById('map'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData
});
heatmap.setMap(map);
}
</script>
<div id="#mapContent">
<div id="map" style="width: auto; height: 550px; position: relative; overflow: hidden;"></div>
</div>