关于javascript：Google Maps API 3 – 信息窗口问题

Google Maps API 3 - Info Window Issue

本问题已经有最佳答案，请猛点这里访问。

我需要添加什么？在哪里 - 使用我的var位置txt使我的标记弹出信息窗口？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

创建一个全局变量(或在setMarkers函数中)，infowindow：

1
2
3

var infowindow = new google.maps.InfoWindow({
content:""
});

然后在你的循环中，调用一个新函数，传递你需要的各种参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});

bindInfoWindow(marker, map, infowindow, location[0]);
}

然后创建一个新的全局函数，它将click事件绑定到标记并打开带有指定内容的infowindow：

1
2
3
4
5
6

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

更新：这是我使用的完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

var map;
var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);

var MY_MAPTYPE_ID = 'custom_style';

var locations = [
['Plano TX', 33.01984, -96.69889, 13],
['Hemel Hempstead UK', 51.75324, -0.44863, 12],
['Dubai', 25.27114, 55.30748, 11],
['San Francisco CA', 37.77493, -122.41942, 10],
['Chicago IL', 41.87811, -87.62980, 9],
['New York NY', 40.71435, -74.00597, 8],
['Troy MI', 42.60559, -83.14993, 7],
['Santa Monica CA', 34.01945, -118.49119, 6],
['St Peters MO', 38.78747, -90.62989, 5],
['Pittsford NY', 43.09062, -77.51500, 4],
['Las Vegas NV', 36.11465, -115.17282, 3],
['Haidian Beijing', 39.95991, 116.29805, 2],
['New Delhi', 28.63531, 77.22496, 1]
];

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

function setMarkers(map, locations) {
var infowindow = new google.maps.InfoWindow({
content:""
});
var image = {
url: 'images/marker-rmg.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 32)
};

var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};

var i, location, myLatLng, marker;

for (i = 0; i < locations.length; i++) {
location = locations[i];
myLatLng = new google.maps.LatLng(location[1], location[2]);
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});

bindInfoWindow(marker, map, infowindow, location[0]);
}
}

function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(48.1391265, 11.580186300000037),
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ { stylers: [ { hue:"#098AAD" } ] } ]
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

setMarkers(map, locations);
}

google.maps.event.addDomListener(window, 'load', initialize);