我如何把每个标记的infoWindow放在这里？

时间：2013-06-06 21:27:45

标签： arrays google-maps-api-3 infowindow markers

我如何为每个标记放置infoWindow？我一直在尝试，有人告诉我，我不能使用和阵列事件。请帮帮我。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>//<![CDATA[ 
var map;
var infoWindow;
var i;
var mapOptions = {
center: new google.maps.LatLng(0.0, 0.0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var PMarkers = [
[51.515482718, -0.142903122, '<b>esta es una prueba de html</b>'],
[25.2644444, 55.3116667, '<b>esta es otra prueba de html</b>']
];
var posMarkers = {};
var path = [
new google.maps.LatLng(51.515482718, -0.142903122),
new google.maps.LatLng(25.2644444, 55.3116667)
];
var line;
var path2 = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
var poly;
//--------------------------------------------------------------------------------------------------
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (var i = 0; i < PMarkers.length; i++) {
    posMarkers[i] = new google.maps.Marker({
        position: new google.maps.LatLng(PMarkers[i][0], PMarkers[i][1]),
        map: map,
        visible: true
    });
    google.maps.event.addListener(posMarkers, 'click', (function(posMarkers, i) {
        return function() {
            infoWindow.setContent(PMarkers[i][2]);
            infoWindow.open(map, posMarkers);
        }
    })(posMarkers, i));
}
var line = new google.maps.Polyline({
    path: path,
    strokeColor: '#ff0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map,
    visible: true
});
var poly = new google.maps.Polygon({
    path: path2,
    strokeColor: '#4800FF',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    fillOpacity: 0.0,
    map: map,
    visible: true
});

$('#toggle').change(function() {
    for (var i = 0; i < PMarkers.length; i++) {
        if (posMarkers[i].getVisible()) {
            posMarkers[i].setVisible(false);
        }
        else {
            posMarkers[i].setVisible(true);
        }
    }
});
$('#toggle2').change(function() {
        {
        if (line.getVisible()) {
            line.setVisible(false);
        }
        else {
            line.setVisible(true);
        }
    }
});
$('#toggle3').change(function() {
        {
        if (poly.getVisible()) {
            poly.setVisible(false);
        }
        else {
            poly.setVisible(true);
        }
    }
});
}

google.maps.event.addDomListener(window, 'load', initialize);
//]]>  
</script>
</head>
<body>
<div style="padding:10px">
<input type="checkbox" id="toggle" checked="checked"><b>Markers</b>
<input type="checkbox" id="toggle2" checked="checked"><b>Polilinea</b>
<input type="checkbox" id="toggle3" checked="checked"><b>Poligono</b>
</div>
<div id="map_canvas"></div>
</body>
</html>

非常感谢您提供给我的任何帮助。顺便说一句，您可以根据需要使用此代码。

1 个答案:

答案 0 :(得分：0)

我想出来并放了一些东西。每个人都可以免费使用。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>//<![CDATA[ 
var map;
var mapOptions = {
center: new google.maps.LatLng(0.0, 0.0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var PMarkers = [
[51.515482718, -0.142903122, '<b>una prueba de antena</b>'],
[25.2644444, 55.3116667, '<b>otra prueba de antena</b>']
];
var posMarkers = [];
var tooltips = [];
var iconMarker = {
url: 'images/orangesq.png'
};
var Antenas = [
[25.774252, -80.190262, '<b>una prueba de html</b>'],
[18.466465, -66.118292, '<b>otra prueba de html</b>']
];
var posAntenas =[];
var infAntenas =[];
var iconAnt = {
url: 'images/wifi.png'
};
var path = [
new google.maps.LatLng(51.515482718, -0.142903122),
new google.maps.LatLng(25.2644444, 55.3116667)
];
var line;
var path2 = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
var poly;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (var i = 0; i < PMarkers.length; i++) {
    var test = iconAnt;
    var pos = new google.maps.LatLng(PMarkers[i][0], PMarkers[i][1]);
    var marker = new google.maps.Marker({
        position: pos,
        map: map,
        icon: test,
        visible: true,
        info: PMarkers[i][2]
    });
    var tooltip = new google.maps.InfoWindow({});
    google.maps.event.addListener(marker, 'click', function(){
        tooltip.setContent(this.info);
        tooltip.open(map, this);
    });
    posMarkers.push(marker);
    tooltips.push(tooltip);
}
//-------------------------------------------------------------------------------------
for (var i = 0; i < Antenas.length; i++) {
    var pos1 = new google.maps.LatLng(Antenas[i][0], Antenas[i][1]);
    var marker1 = new google.maps.Marker({
        position: pos1,
        map: map,
        icon: iconMarker,
        visible: true,
        info: Antenas[i][2]
    });
    var tooltip = new google.maps.InfoWindow({});
    google.maps.event.addListener(marker1, 'click', function(){
        tooltip.setContent(this.info);
        tooltip.open(map, this);
    });
    posAntenas.push(marker1);
    infAntenas.push(tooltip);
}
google.maps.event.addListener(map, 'click', function(){
    tooltip.close();
});
//-------------------------------------------------------------------------------------------   
var line = new google.maps.Polyline({
    path: path,
    strokeColor: '#ff0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map,
    visible: true
});
var poly = new google.maps.Polygon({
    path: path2,
    strokeColor: '#4800FF',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    fillOpacity: 0.0,
    map: map,
    visible: true
});

$('#toggle').change(function() {
    for (var i = 0; i < posMarkers.length; i++) {
        if (posMarkers[i].getVisible()) {
            posMarkers[i].setVisible(false);
        }
        else {
            posMarkers[i].setVisible(true);
        }
        if (tooltip.getMap()){
            tooltip.close();
        }
    }
});
$('#toggle2').change(function() {
        {
        if (line.getVisible()) {
            line.setVisible(false);
        }
        else {
            line.setVisible(true);
        }
    }
});
$('#toggle3').change(function() {
        {
        if (poly.getVisible()) {
            poly.setVisible(false);
        }
        else {
            poly.setVisible(true);
        }
    }
});
}

google.maps.event.addDomListener(window, 'load', initialize);
//]]>  
</script>
</head>
<body>
<div style="padding:10px">
<input type="checkbox" id="toggle" checked="checked"><b>Markers</b>
<input type="checkbox" id="toggle2" checked="checked"><b>Polilinea</b>
<input type="checkbox" id="toggle3" checked="checked"><b>Poligono</b>
</div>
<div id="map_canvas"></div>
</body>
</html>
相关问题
最新问题