Fatal编程技术网
  • javascript/
  • Javascript 如何修复谷歌地图中的信息窗口

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

javascript google-maps vue.js web

Javascript 如何修复谷歌地图中的信息窗口,javascript,google-maps,vue.js,web,google-maps-markers,Javascript,Google Maps,Vue.js,Web,Google Maps Markers,我试图在谷歌地图中显示信息窗口，但它显示的是最后一个标记信息，而不是所有的标记 let myLatlng = new window.google.maps.LatLng(-33.890542, 151.274856 ); let mapOptions = { zoom: 13, center: myLatlng, scrollwheel: true, }; var locations = [ ['Bond

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

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

let myLatlng=new window.google.maps.LatLng（-33.890542151.274856）；
让mapOptions={
缩放：13，
中心：myLatlng，
滚轮：对，
}; 
变量位置=[
[Bondi Beach'，-33.890542151.274856，4]，
[Coogee Beach'，-33.923036151.259052,5]，
[Cronulla Beach'，-34.028249151.157507,3]，
[‘曼利海滩’，-33.80010128657071151.28747820854187，2]，
[“马鲁布拉海滩曼利海滩曼利海滩”，-33.950198151.259302，1]
];
让map=newwindow.google.maps.map(
document.getElementById（“map”），
地图选项
);
var计数；
var标记=[]；
对于（count=0；count
我认为您必须这样更改代码：

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

var位置=[
[Bondi Beach'，-33.890542151.274856，4]，
[Coogee Beach'，-33.923036151.259052,5]，
[Cronulla Beach'，-34.028249151.157507,3]，
[‘曼利海滩’，-33.80010128657071151.28747820854187，2]，
[“马鲁布拉海滩曼利海滩曼利海滩”，-33.950198151.259302，1]
];
var计数；
var标记=[]；
对于（count=0；count
在这里，我发现了一些您在做什么的问题：

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);
}
  • 您正在初始化循环中的每个迭代，但它不应该初始化。这就是为什么只显示一个标记（最后一个）

  • 您试图在循环后仅绑定事件一个标记（最后一个），但它应该是循环内部的单个标记

我对如何工作有以下建议：

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);
}
  • 在地图上绘制标记之前初始化地图一次
  • 绑定标记单击每个标记的内部循环
  • 按车床对象设置信息窗口位置
以下是工作演示：

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

var位置=[
[Bondi Beach'，-33.890542151.274856，4]，
[Coogee Beach'，-33.923036151.259052,5]，
[Cronulla Beach'，-34.028249151.157507,3]，
[‘曼利海滩’，-33.80010128657071151.28747820854187，2]，
[“马鲁布拉海滩曼利海滩曼利海滩”，-33.950198151.259302，1]
];
var计数，标记；
//初始映射
变量映射选项={
缩放：13，
中心：新的google.maps.LatLng（位置[0][1]，位置[0][2]），
滚轮：对，
};
var map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
//创建信息窗口
var infowindow=new google.maps.infowindow({
最大宽度：350，
pixelOffset:new google.maps.Size（-10，-25）
});
var infoFn=函数（计数）{
返回函数（e）{
变量内容=“”+
'位置：'+位置[计数][0]+''+
“，Lat:”+位置[计数][1]+”+
'长：'+位置[计数][2]+'+
'';
infowindow.setContent（content）；
打开（地图）；
infowindow.setPosition（新的google.maps.LatLng（locations[count][1]，locations[count][2]）；
}
};
//添加标记
对于（计数=0；计数
我认为在循环内部，您必须将数据推送到标记数组。当循环运行时，仅将值分配给ur数组删除最后一个，这就是为什么只有最后一个显示Bro现在我需要在信息窗口中显示每个数组的位置名称marker@Pavan，然后必须设置如下内容：infowindow.setContent（
${locations[count][0]}
）；。我也更新了答案。请立即检查。bro工作不正常，我正在使用VueJS。。。beginner@Pavan，在绑定标记上的单击事件之前准备信息窗口内容。请参阅上次更新。@Pavan，如果这个答案对您有帮助，请接受它。