Question

我想学习在我的网络应用中嵌入地图。我想要一个基本的功能，如添加多个标记，costum标记，costum infowindow等。我做了直到添加costum标记。当我想为每个标记设置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>

Answer 1

你的代码几乎就在那里。为了让它发挥作用，我修改了一些东西......

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

<script>
    var map, marker;
    ...

2）我修改了addMarker函数，将结果分配给全局变量标记而不是局部变量标记：

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

3）我修改了遍历features的代码，并为每个标记创建了一个标记和事件监听器，如下所示：

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));
}

请参阅this Plunkr了解有效的演示。

编辑：上面的第3点我用更传统的方式重写了循环。以下也可以：

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']);

至（注意features而非feature）：

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

请参阅this Plunkr了解演示。

为什么我在谷歌地图Javascript API上的infoWindow不起作用？

1 个答案: