Google maps 为什么谷歌地图Javascript API上的信息窗口不'；不行？_Google Maps_Google Maps Api 3

Google maps 为什么谷歌地图Javascript API上的信息窗口不'；不行？

google-maps google-maps-api-3

Google maps 为什么谷歌地图Javascript API上的信息窗口不'；不行？,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,我想学习在我的web应用程序中嵌入地图。我想要一个基本功能，如添加多个标记，肋骨标记，肋骨信息窗口等，我已经做了，直到添加肋骨标记。当我想为每个标记设置infowindow时，它仍然不起作用，有人能帮我找到解决方案吗？谢谢这是我的密码： <!DOCTYPE html> <html> <head> <title>Styling the Base Map</title> <meta name="viewport" content="

我想学习在我的web应用程序中嵌入地图。我想要一个基本功能，如添加多个标记，肋骨标记，肋骨信息窗口等，我已经做了，直到添加肋骨标记。当我想为每个标记设置infowindow时，它仍然不起作用，有人能帮我找到解决方案吗？谢谢

这是我的密码：

<!DOCTYPE html>
<html>
<head>
<title>Styling the Base Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 3px solid #000;
  }
  #legend h3 {
    margin-top: 0;
  }
  #legend img {
    vertical-align: middle;
  }
</style>
<script>
  var map;
  function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 18,
      center: new google.maps.LatLng(-8.704956, 115.22750),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
     mapTypeControl: true,
     mapTypeControlOptions: {
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
         position: google.maps.ControlPosition.TOP_CENTER
     }
    });
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);
    var infowindow = new google.maps.InfoWindow();

    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var icons = {
      parking: {
        name: 'Parking',
        icon: iconBase + 'parking_lot_maps.png'
      },
      library: {
        name: 'Library',
        icon: iconBase + 'library_maps.png'
      },
      info: {
        name: 'Info',
        icon: iconBase + 'info-i_maps.png'
      }
    };

    function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
    }



    var features = [
      {
        position: new google.maps.LatLng(-8.702709, 115.224461),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91539, 151.22820),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91747, 151.22912),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91910, 151.22907),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91725, 151.23011),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91872, 151.23089),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91784, 151.23094),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91682, 151.23149),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91790, 151.23463),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91666, 151.23468),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.916988, 151.233640),
        type: 'info'
      }, {
        position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
        type: 'parking'
      }, {
        position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
        type: 'parking'
      }, {
        position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
        type: 'parking'
      }, {
        position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
        type: 'parking'
      }, {
        position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
        type: 'parking'
      }, {
        position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
        type: 'parking'
      }, {
        position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
        type: 'parking'
      }, {
        position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
        type: 'library'
      }
    ];


    for (var i = 0, feature; feature = features[i]; i++) {
      addMarker(feature);
       google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(feature[i]['type']);
      infowindow.open(map, marker);
    }
  })(marker, i));
    }



    var legend = document.getElementById('legend');
    for (var key in icons) {
      var type = icons[key];
      var name = type.name;
      var icon = type.icon;
      var div = document.createElement('div');
      div.innerHTML = '<img src="' + icon + '"> ' + name;
      legend.appendChild(div);
    }

    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
  }

</script>
 </head>
 <body>
 <div id="map"></div>
  <script async defer
    src="https://maps.googleapis.com/maps/api /js?callback=initialize">
</script>
<div id="legend"><h3>Legend</h3></div>
</body>
</html>


设置底图的样式
html，body，#map{
保证金：0；
填充：0；
身高：100%；
}
#传奇{
字体系列：Arial，无衬线；
背景：#fff；
填充：10px；
利润率：10px；
边框：3倍实心#000；
}
#图例h3{
边际上限：0；
}
#图例img{
垂直对齐：中间对齐；
}
var映射；
函数初始化（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：18，
中心：新google.maps.LatLng（-8.704956115.22750），
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单，
位置：google.maps.ControlPosition.TOP\u中心
}
});
var trafficLayer=new google.maps.trafficLayer（）；
trafficLayer.setMap（地图）；
var infowindow=new google.maps.infowindow（）；
iconBase变量https://maps.google.com/mapfiles/kml/shapes/';
变量图标={
停车场：{
名称：“停车场”，
图标：iconBase+“parking\u lot\u maps.png”
},
图书馆：{
名称：‘图书馆’，
图标：iconBase+“library_maps.png”
},
信息：{
名称：“信息”，
图标：iconBase+“info-i_maps.png”
}
};
功能添加标记（功能）{
var marker=new google.maps.marker({
位置：feature.position，
图标：图标[feature.type]。图标，
地图：地图
});
}
变量特征=[
{
位置：新google.maps.LatLng（-8.702709115.224461），
键入：“信息”
}, {
位置：新google.maps.LatLng（-33.915391151.22820），
键入：“信息”
}, {
位置：new google.maps.LatLng（-33.91747151.22912），
键入：“信息”
}, {
位置：新google.maps.LatLng（-33.91910151.22907），
键入：“信息”
}, {
位置：新google.maps.LatLng（-33.91725151.23011），
键入：“信息”
}, {
位置：新google.maps.LatLng（-33.91872151.23089），
键入：“信息”
}, {
位置：新google.maps.LatLng（-33.91784151.23094），
键入：“信息”
}, {
位置：new google.maps.LatLng（-33.91682151.23149），
键入：“信息”
}, {
位置：new google.maps.LatLng（-33.91790151.23463），
键入：“信息”
}, {
位置：new google.maps.LatLng（-33.91666151.23468），
键入：“信息”
}, {
位置：新google.maps.LatLng（-33.916988151.233640），
键入：“信息”
}, {
位置：new google.maps.LatLng（-33.916623479031051.22879464019775），
类型：“停车”
}, {
位置：new google.maps.LatLng（-33.916365282092855151.2293739734496），
类型：“停车”
}, {
位置：new google.maps.LatLng（-33.91665018901448151.2282474695587），
类型：“停车”
}, {
位置：new google.maps.LatLng（-33.919543720969806151.23112279762267），
类型：“停车”
}, {
位置：new google.maps.LatLng（-33.91608037421864151.23288232673644），
类型：“停车”
}, {
位置：new google.maps.LatLng（-33.91851096391805151.2344058214569），
类型：“停车”
}, {
位置：new google.maps.LatLng（-33.91818154739766151.2346203981781），
类型：“停车”
}, {
位置：new google.maps.LatLng（-33.91727341958453151.23348314155578），
键入：“库”
}
];
for（变量i=0，特征；特征=特征[i]；i++）{
添加标记（特征）；
google.maps.event.addListener（标记，'click'，（函数（标记，i）{
返回函数（）{
setContent（feature[i]['type']）；
信息窗口。打开（地图、标记）；
}
})（marker，i））；
}
var legend=document.getElementById（'legend'）；
用于（变量输入图标）{
变量类型=图标[键]；
var name=type.name；
var icon=type.icon；
var div=document.createElement（'div'）；
div.innerHTML=''+名称；
图例.附件（部门）；
}
map.controls[google.maps.ControlPosition.RIGHT\u BOTTOM].push（图例）；
}
传奇

您的代码就快到了。为了让它工作，我修改了一些东西

1）我添加了缺少的全局变量标记（如问题下面的评论中所述）：

3）我已经修改了在

功能上循环的代码，并为每个标记创建了一个标记和事件侦听器，如下所示：
for (var i = 0; i < features.length; i++) {
    addMarker(features[i]);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(features[i]['type']);
          infowindow.open(map, marker);
      }
  })(marker, i));
}

我在这里所做的就是改变你的路线：
infowindow.setContent(feature[i]['type']);

至（注意功能
非功能
）：
请参阅演示。
我收到一个javascript错误未捕获引用错误：标记未定义啊，我知道，这是因为我没有将标记定义为全局变量。谢谢dudehi@geocodezip，如果需要，如何做：我有一个按钮。当按钮A单击时，只显示一个标记，当我单击B时，一个标记隐藏，而B标记显示。你有推荐人吗？
for (var i = 0; i < features.length; i++) {
    addMarker(features[i]);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(features[i]['type']);
          infowindow.open(map, marker);
      }
  })(marker, i));
}

for (var i = 0, feature; feature = features[i]; i++) {
    addMarker(feature);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(features[i]['type']);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

infowindow.setContent(feature[i]['type']);

infowindow.setContent(features[i]['type']);