Question

我有三个数组：myLats，（纬度）myLngs（经度）和myLocs（地址字符串）例如myLats [0] = 53.3534751 ,, myLngs [0] = -2.5682085，myLocs [0] = Longwood Rd Appleton Warrington。所以每个数组的元素都以数字方式相互对应。

在我的initialize（）函数中构建地图时，我循环遍历这些以在正确的坐标处放置多个标记，并且我还试图让每个标记在单击时出现信息窗口，但是当我单击标记时infowindow根本不会出现。对此的任何帮助将不胜感激。

代码：

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(54.00366, -2.547855),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

    var marker, infowindow, i;

    for (i = 0; i <= myLats.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(myLats[i], myLngs[i]),
            map: map,
            clickable: true,
            icon: '". url::base() ."resources/icons/accident.png',
        });
        infowindow = new google.maps.InfoWindow({
            content: myLocs[i],
        });
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
}

Answer 1

处理多个标记时，这是一个常见问题。实际上，您并没有为每个标记创建一个新窗口，但必须为每个标记重新定义单个窗口。

您将在Google Map API V3

的第88页上找到问题和解决方案

如果您是Google Maps API的新手，我建议您阅读该书，它给了我一个很好的开始，我避免了很多“常见”的错误。

希望这会有所帮助。吉姆

Answer 2

我做了一些更改，比如在函数内添加标记，添加'var'，并将i＆lt; = myLats.length更改为i＆lt; myLats.length。这些变化的组合使其发挥作用。

    var  myLats = [ 54.20366, 54.42366, 54.64366];
    var  myLngs = [ -2.54788, -2.66788, -2.78788];
    var  myLocs = [ "Loc a" , "Loc b" , "Loc c"];

function initialize()
{
var myOptions =
{
    center: new google.maps.LatLng(54.00366,-2.547855),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);

var marker, infowindow, i;

for (i=0; i < myLats.length; i++)
{
  addMarker(i);
}
function addMarker(i) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(myLats[i],myLngs[i]),
        map: map,
        clickable: true,
        //icon: '". url::base() ."resources/icons/accident.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: myLocs[i]
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
}

但是，我猜你想要一个只保留一个信息窗口的解决方案，我首先想到了这个：

    var  myLats = [ 54.20366, 54.42366, 54.64366];
    var  myLngs = [ -2.54788, -2.66788, -2.78788];
    var  myLocs = [ "Loc a" , "Loc b" , "Loc c"];
    var  map, marker, infowindow, i;


function initialize()
{
var myOptions =
{
    center: new google.maps.LatLng(54.00366,-2.547855),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);


infowindow = new google.maps.InfoWindow({ });
for (i = 0; i < myLats.length; i++) {
  addMarker(i);
}
}

function addMarker(i) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(myLats[i],myLngs[i]),
        map: map,
        clickable: true
        //icon: '". url::base() ."resources/icons/accident.png'      
    });

    google.maps.event.addListener(marker, 'click', function(event) {
        infowindow.setContent(myLocs[i]);
        infowindow.open(map,marker);
    });
}

单击标记时不显示Google Maps InfoWindow

2 个答案: