如何修复谷歌地图中的信息窗口

Posted 2023-03-28

【中文标题】如何修复谷歌地图中的信息窗口

【英文标题】：how to fix info window in google map

【发布时间】：2019-12-11 01:47:09

【问题描述】：

我正在尝试在谷歌地图中显示信息窗口，但它显示最后一个标记信息而不是所有标记

    let myLatlng = new window.google.maps.LatLng(-33.890542, 151.274856 );
    let mapOptions = 
      zoom: 13,
      center: myLatlng,
      scrollwheel: true,  

      ; 
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
    ];

    let map = new window.google.maps.Map(
      document.getElementById("map"),
      mapOptions
    );


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


    var infowindow = new google.maps.InfoWindow(
      content:"<div></div>"
      );

    google.maps.event.addListener(marker, 'click', function() 
      infowindow.open(map,marker);
      );

    marker.setMap(map);

【问题讨论】：

我认为在循环内你必须将你的数据推送到标记数组。当循环运行时，您只需将值分配给您的数组，删除最后一个，这就是为什么只显示最后一个

【参考方案1】：

我认为您必须像这样更改代码：

 var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
 ];
var count;
var marker=[];
for (count = 0; count < locations.length; count++)   


let myLatlng = new window.google.maps.LatLng(locations[count][1], locations[count][2]);

let mapOptions = 
  zoom: 13,
  center: myLatlng,
  scrollwheel: true,  
;

let map = new window.google.maps.Map(
  document.getElementById("map"),
  mapOptions
  );
  marker = new google.maps.Marker(
  position: myLatlng,
  map: map,
  title: locations[count][0]
  );
   

var infowindow = new google.maps.InfoWindow(
  content:"<div></div>"
  );

google.maps.event.addListener(marker, 'click', function() 
  infowindow.open(map,marker);
  );

marker.setMap(map);

【参考方案2】：

在这里我发现了一些你在做什么的问题：

您在循环中的每次迭代都初始化 map，但它不应该。这就是为什么只显示一个标记（最后一个）的原因。

您试图在循环之后仅绑定一个标记（最后一个），但它应该用于循环内的单个标记。

我有以下工作建议：

在地图上绘制标记之前初始化地图一次 在每个标记的循环内单击绑定标记。 通过 latLng 对象设置信息窗口位置

这是工作演示：

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
];

var count, marker;

// Init map
var mapOptions = 
    zoom: 13,
    center: new google.maps.LatLng(locations[0][1], locations[0][2]),
    scrollwheel: true,
;

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Create info window
var infowindow = new google.maps.InfoWindow(
    maxWidth: 350,
    pixelOffset: new google.maps.Size(-10,-25)
);

var infoFn = function (count) 
    return function (e) 
        var content = '<div>' +
            '<span>Location: ' + locations[count][0] + '</span>' +
            '<span>, Lat: ' + locations[count][1] + '</span>' +
            '<span>, Long: ' + locations[count][2] + '</span>' +
            '</div>';

        infowindow.setContent(content);
        infowindow.open(map);
        infowindow.setPosition(new google.maps.LatLng(locations[count][1], locations[count][2]));
    
;

// Add markers
for (count = 0; count < locations.length; count++) 
    marker = new google.maps.Marker(
        position: new google.maps.LatLng(locations[count][1], locations[count][2]),
        map: map,
        title: locations[count][0]
    );
    marker.setMap(map);

    let fn = infoFn(count);
    google.maps.event.addListener(marker, 'click', fn);

【讨论】：

兄弟现在我需要在该信息窗口中显示位置名称......对于每个标记

@Pavan，那么你必须像这样设置内容：infowindow.setContent(<div>$locations[count][0]</div>);。我也更新了答案。请立即检查。

兄弟工作不正常，正在使用 VueJS...初学者

@Pavan，在标记上绑定点击事件之前准备信息窗口内容。查看上次更新。

@Pavan，如果对您有帮助，请接受此答案。 What should I do when someone answers my question?