如何使用Google Maps API在标记上设置弹出窗口？ [英] How to set a popup on markers with Google Maps API?

问题描述

我有这个代码显示和设置我所有的标记。如何添加带有此代码的标记信息的弹出窗口？我在文本上添加了i变量，但它在所有标记弹出的test-723上设置，其中723是i变量的最后一个值。什么是错误的？

pre $ for（var i = 0; i< arraylng.length-1; i ++）{
var marker = new google.maps.Marker（{
position：new google.maps.LatLng（arraylng [i]，arraylat [i]）
}）;
var infowindow = new google.maps.InfoWindow（{
content：
}）;
google.maps.event.addListener（marker，'click'，function（）{
infowindow.setContent（'test：'+ i +''）;
infowindow.open（map ，this）;
}）;
markers.push（marker）;



解决方案

首先，改变循环条件到 i< arraylng.length 。现在它并没有捕获数组的最后一个元素。

JavaScript变量适用于函数作用域，因此您需要为每个标记侦听器调用一个函数来创建正确的变量引用。您可以使用匿名功能， 如此处所示 ，或者定义一个用于创建点击的功能监听器：

多个infoWindow：

 函数makeInfoWindowEvent（map，infowindow ，marker）{
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.open（map，marker）; 
}）; 
} 
  

很可能您不希望同时打开多个InfoWindow，因为不得不点击关闭 x 令人讨厌。然后，您只需要一个InfoWindow对象，并在点击标记时设置内容：

单个InfoWindow：

  ... 
 var infowindow = new google.maps.InfoWindow（）; 
 
 for（var i = 0; i< arraylng.length-1; i ++）{
 var marker = new google.maps.Marker（{
 position：new google .maps.LatLng（arraylng [i]，arraylat [i]），
 map：map 
}）; 
 
 makeInfoWindowEvent（map，infowindow，test+ i，marker）; 
 
 markers.push（marker）; 
 
 
 
函数makeInfoWindowEvent（map，infowindow，contentString，marker）{
 google.maps.event.addListener（marker，'click'，function（ ）{
 infowindow.setContent（contentString）; 
 infowindow.open（map，marker）; 
}）; 
} 
  

I have this code where I display and set all my markers. How can I add a popup with some information on markers with this code? I add "i" variable on text, but it sets on all markers popup with "test - 723", where 723 is last value of the "i" variable. What is wrong?

for (var i = 0; i < arraylng.length-1; i++) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(arraylng[i], arraylat[i])
  });
  var infowindow = new google.maps.InfoWindow({
    content: " "
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent('test: ' + i + '');
    infowindow.open(map, this);
  });
  markers.push(marker);
}

解决方案

First, change the loop condition to i < arraylng.length. Right now it is not capturing the last element of your array.

JavaScript variables works with function scope so you need to call a function for each marker listener to create the correct variable references. You can use an anonymous function, as seen here, or define a function for creating the click listener:

Multiple infoWindows:

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

Most likely you will not want more than one InfoWindow open at the same time, because it is annoying to have to click on the close x. Then you will only want one InfoWindow object, and set the content as the marker is clicked:

Single InfoWindow:

...
  var infowindow = new google.maps.InfoWindow();

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

    makeInfoWindowEvent(map, infowindow, "test" + i, marker);

    markers.push(marker);
  }
}

function makeInfoWindowEvent(map, infowindow, contentString, marker) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
}

这篇关于如何使用Google Maps API在标记上设置弹出窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！