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

Google Maps API v3 Custom Style Map and Multiple Markers Not Displaying

本文关键字：显示 v3 API 自定义 样式 地图 谷歌地图      更新时间：2023-09-26

Hi尝试将多个标记与谷歌地图的自定义样式相结合，但我做不到。如果有人能指出我的错误，我将不胜感激。我可以单独做这两件事，但不能一起做，因为标记中的"地图"是定制的。我怎么能得到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);
  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);
  1. 然后添加标记

完整代码

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>

相关文章：