0

我正在尝试在景观/水上创建具有自定义颜色的 Google 热图。如果我只使用“自定义颜色”或只使用“热图”，它会起作用，但当我同时使用两者时就不行。现在我在 map-div 中只看到一个米色的大屏幕。

有人看到这段代码有什么问题吗？

var map, pointarray, heatmap;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var heat_map = 'custom_style';

var taxiData = [
 new google.maps.LatLng(37.782551, -122.445368),
 new google.maps.LatLng(37.782745, -122.444586),
 new google.maps.LatLng(37.782842, -122.443688),
 new google.maps.LatLng(37.782919, -122.442815),
 new google.maps.LatLng(37.782992, -122.442112),
 new google.maps.LatLng(37.783100, -122.441461),
 new google.maps.LatLng(37.783206, -122.440829),
 new google.maps.LatLng(37.783273, -122.440324),
 new google.maps.LatLng(37.783316, -122.440023),
 new google.maps.LatLng(37.783357, -122.439794),
 new google.maps.LatLng(37.783371, -122.439687),
 new google.maps.LatLng(37.783368, -122.439666),
 new google.maps.LatLng(37.783383, -122.439594),
 new google.maps.LatLng(37.783508, -122.439525),
 new google.maps.LatLng(37.783842, -122.439591),
 new google.maps.LatLng(37.784147, -122.439668),
 new google.maps.LatLng(37.784206, -122.439686),
 new google.maps.LatLng(37.784386, -122.439790),
 new google.maps.LatLng(37.751266, -122.403355)
];
function initialize() {

var featureOpts = [
{
"featureType": "administrative.country",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "administrative.province",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "administrative.locality",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "administrative.neighborhood",
"stylers": [
  { "visibility": "on" }
]
},{
"featureType": "administrative.land_parcel",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "administrative.land_parcel",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
  { "visibility": "on" },
  { "lightness": 43 },
  { "color": "#000000" }
]
},{
"featureType": "landscape.natural.terrain",
"stylers": [
  { "color": "#808080" }
]
},{
"featureType": "landscape.natural.landcover",
"stylers": [
  { "color": "#808080" }
]
},{
"featureType": "landscape.natural.terrain",
"elementType": "geometry.fill",
"stylers": [
  { "lightness": 100 },
  { "color": "#ffffff" }
]
},{
"featureType": "poi.attraction",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "poi.government",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "poi.medical",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "poi.park",
"stylers": [
  { "visibility": "on" },
  { "color": "#f0f0f0" }
]
},{
"featureType": "poi.place_of_worship",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "poi.school",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "poi.sports_complex",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "road.highway",
"stylers": [
  { "color": "#000000" }
]
},{
"featureType": "road.arterial",
"stylers": [
  { "color": "#808080" }
]
},{
"featureType": "road.local",
"stylers": [
  { "color": "#b4b4b4" }
]
},{
"featureType": "water",
"elementType": "geometry",
"stylers": [
  { "color": "#d5d5d5" }
]
},{
"featureType": "transit",
"stylers": [
  { "visibility": "simplified" }
]
 },{
"featureType": "transit.station",
"stylers": [
  { "visibility": "off" }
]
},{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
  { "visibility": "on" },
  { "color": "#222222" }
]
},{
"featureType": "poi.business",
"stylers": [
  { "visibility": "off" }
]
},{
},{
"featureType": "landscape.natural.landcover"  },{
"featureType": "landscape.natural",
"stylers": [
  { "visibility": "on" },
  { "color": "#ffffff" }
]
},{
},{
} 
]
var mapOptions = {
zoom: 2,
center: brooklyn,
scrollwheel:true,
mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, heat_map]
},
mapTypeId: heat_map
};

map = new google.maps.Map(document.getElementById('heat_map'),
  mapOptions);

  var marker = new google.maps.Marker({
      position: brooklyn,
      animation: google.maps.Animation.DROP,

      title:"Hello World!"
      });

      marker.setMap(map);

  var styledMapOptions = {
      name: 'Heat Map'
      };

 var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions).MVCArray(taxiData).HeatmapLayer({
 data: pointArray
 });
;

map.mapTypes.set(heat_map, customMapType);
}

google.maps.event.addDomListener(window, 'load', initialize);
4

1 回答 1

0

这部分代码有点混乱：

var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions).MVCArray(taxiData).HeatmapLayer({
 data: pointArray
 });
;

将其替换为：

 var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
 new google.maps.visualization.HeatmapLayer({
   data: taxiData,
   map:  map
 });
于 2013-08-24T01:48:44.287 回答