Question

我正在尝试根据包含信息窗口文本和邮政编码的数据数组在地图上绘制多个点。我也添加了一个监听器，以便在单击标记时弹出信息窗口。

当我运行以下代码时，只会放置最后一个标记。有人能帮忙吗？

<div class="GoogleMap">
  <script src="http://maps.google.com/maps/api/js?sensor=false"type="text/javascript"></script>

  <div id="map" style="width: 977px; height: 600px;"></div>
  <script type="text/javascript">
    var locations = [
      ['<h4>Test</h4>', 'CH45 4SQ'],
      ['<h4>Test2</h4>', 'CH63 9AL']
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(53.45631, -2.73710),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();
    var marker = new google.maps.Marker({ map: map });
    var i;

    for (i = 0; i < locations.length; i++) {

      geocoderRequest = {address: locations[i][1]}
      geocoder.geocode(geocoderRequest, function(results, status) {
        marker.setPosition(results[0].geometry.location);
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>

</div>

Answer 1

看起来您只是创建一个标记对象并在地图上移动它。

看一下这个例子：Google Maps JS API v3 - Simple Multiple Marker Example

特别是这部分代码。

 var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

Google Maps API - 不绘制所有标记

1 个答案: