谷歌地图API v3自定义样式地图和多个标记不显示

Question

您好已经试图将多个标记与谷歌地图的自定义样式结合，我不尽人意。如果有人能指出我的错误，我将不胜感激。由于标记中的“地图”变得自定义，我可以将两者分开但不能连在一起。我可以如何获得2个图标中的1个来显示。也许我必须分别显示地图和昨晚开始的图标，所以idk。

var LocationData = [ 
    [42.,-70., "26 E Hastings St, Vancouver" ], 
[42.,-70., "71 E Hastings St, Vancouver" ] 

]; 
var imageIcon ='micon.png'; 

var map; 
var MY_MAPTYPE_ID = 'custom_style'; 

function initialize() { 

    var featureOpts = [ 
    { 
    stylers: [ 
    { hue: '#000089' }, 
    { visibility: 'simplified' }, 
    { gamma: 0.5 }, 
    { weight: 0.5 } 
    ] 
}, 

{ 
    featureType: 'water', 
    stylers: [ 
    { color: '#890000' } 
    ] 
} 
]; 

Map(document.getElementById('map-canvas')); 
var bounds = new google.maps.LatLngBounds(); 
var infowindow = new google.maps.InfoWindow(); 

for (var i in LocationData) 
{ 
    var p = LocationData[i]; 
    var latlng = new google.maps.LatLng(p[0], p[1]); 
    bounds.extend(latlng); 

    var marker = new google.maps.Marker({ 
     position: latlng, 
//   map: map, 
     title: p[2], 
    icon: imageIcon, 
    mapTypeControlOptions: { 
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
}, 
mapTypeId: MY_MAPTYPE_ID 
    }); 


    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(this.title); 
     infowindow.open(map, this); 
    }); 



    map = new google.maps.Map(document.getElementById('map-canvas'), marker); 
var styledMapOptions = { 
    name: 'Custom Style' 
}; 

var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 
map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 
// To add the marker to the map, call setMap(); 
marker.setMap(map); 
} 

    map.fitBounds(bounds); 
} 

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

Answer 1

1. 您需要正确定义地图

map = new google.maps.Map(document.getElementById('map-canvas'), { 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
     }, 
     mapTypeId: MY_MAPTYPE_ID 
    }); 
    var styledMapOptions = { 
     name: 'Custom Style' 
    }; 
    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 
    map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 

然后将标记添加到它

完整代码

var LocationData = [ 
 
    [42., -70., "26 E Hastings St, Vancouver"], 
 
    [42., -71., "71 E Hastings St, Vancouver"] 
 

 
]; 
 
var imageIcon = 'micon.png'; 
 

 
var map; 
 
var MY_MAPTYPE_ID = 'custom_style'; 
 

 
function initialize() { 
 

 
    var featureOpts = [{ 
 
     stylers: [{ 
 
      hue: '#000089' 
 
     }, { 
 
      visibility: 'simplified' 
 
     }, { 
 
      gamma: 0.5 
 
     }, { 
 
      weight: 0.5 
 
     }] 
 
    }, 
 

 
    { 
 
     featureType: 'water', 
 
     stylers: [{ 
 
      color: '#890000' 
 
     }] 
 
    }]; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
     mapTypeControlOptions: { 
 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
 
     }, 
 
     mapTypeId: MY_MAPTYPE_ID 
 
    }); 
 
    var styledMapOptions = { 
 
     name: 'Custom Style' 
 
    }; 
 

 
    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions); 
 
    map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    for (var i in LocationData) { 
 
     var p = LocationData[i]; 
 
     var latlng = new google.maps.LatLng(p[0], p[1]); 
 
     bounds.extend(latlng); 
 

 
     var marker = new google.maps.Marker({ 
 
      position: latlng, 
 
      map: map, 
 
      title: p[2], 
 
      // icon: imageIcon, 
 

 
     }); 
 

 

 
     google.maps.event.addListener(marker, 'click', function() { 
 
      infowindow.setContent(this.title); 
 
      infowindow.open(map, this); 
 
     }); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 

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

html, body, #map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> 
 
    </script> 
 
<div id="map-canvas"></div>