谷歌熱圖與自定義顏色

Question

我想創建一個谷歌熱圖與景觀/水的自定義顏色。如果我只使用「自定義顏色」或僅使用「熱圖」，它會起作用，但在我將它們一起使用時不起作用。現在我只能在地圖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); 

Answer 1

你的這部分代碼是有點懵：

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

：

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

將其替換