关于javascript：Google Maps API：点击标记以打开网址

Google Maps API: open url by clicking on marker

我想通过使用Google Maps API 3单击标记来打开一个新窗口。

不幸的是，关于Google Maps API的示例并不多，我发现了以下代码：

1
2
3

google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});

当我创建带有循环的标记时如何使用它？我无力尝试了许多方法。

这是我的代码–我使它变得简单而简短：

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">

<script type="text/javascript">
var points = [
['name1', 59.9362384705039, 30.19232525792222, 12],
['name2', 59.941412822085645, 30.263564729357767, 11],
['name3', 59.939177197629455, 30.273554411974955, 10]
];

function setMarkers(map, locations) {
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};

for (var i = 0; i < locations.length; i++) {
var flag = new google.maps.MarkerImage('markers/' + (i + 1) + '.png',
new google.maps.Size(17, 19),
new google.maps.Point(0,0),
new google.maps.Point(0, 19));

var place = locations[i];
var myLatLng = new google.maps.LatLng(place[1], place[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: flag,
shape: shape,
title: place[0],
zIndex: place[3]
});
}
}

function initialize() {
var myOptions = {
center: new google.maps.LatLng(59.91823239768787, 30.243222856188822),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
setMarkers(map, points);
}

</head>

<body onloadx="initialize()">

</body>
</html>

如何通过单击上面带有代码的标记来打开url？

您可以在每个点上添加一个特定的网址，例如：

1
2
3
4
5

var points = [
['name1', 59.9362384705039, 30.19232525792222, 12, 'www.google.com'],
['name2', 59.941412822085645, 30.263564729357767, 11, 'www.amazon.com'],
['name3', 59.939177197629455, 30.273554411974955, 10, 'www.stackoverflow.com']
];

将网址添加到for循环中的标记值中：

1
2
3
4
5

var marker = new google.maps.Marker({
...
zIndex: place[3],
url: place[4]
});

然后，您可以在for循环的末尾添加：

1
2
3

google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});

另请参见此示例。

相关讨论

url不是Marker类上的对象。但是，没有什么能阻止您将其添加为该类的属性。我猜您正在查看的任何示例也是如此。您是否要为每个标记使用不同的URL？当您这样做时会发生什么：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

for (var i = 0; i < locations.length; i++)
{
var flag = new google.maps.MarkerImage('markers/' + (i + 1) + '.png',
new google.maps.Size(17, 19),
new google.maps.Point(0,0),
new google.maps.Point(0, 19));
var place = locations[i];
var myLatLng = new google.maps.LatLng(place[1], place[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: flag,
shape: shape,
title: place[0],
zIndex: place[3],
url:"/your/url/"
});

google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
}

相关讨论

1
2
3
4
5

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
window.location.href = marker.url;
}
})(marker, i));

相关讨论

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

相关讨论

如果有人想在不需要循环的单个标记上添加URL，请按照以下步骤操作：

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

if ($('#googleMap').length) {
var initialize = function() {
var mapOptions = {
zoom: 15,
scrollwheel: false,
center: new google.maps.LatLng(45.725788, -73.5120818),
styles: [{
stylers: [{
saturation: -100
}]
}]
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
animation: google.maps.Animation.BOUNCE,
icon: 'example-marker.png',
map: map,
url: 'https://example.com'
});

//Add an url to the marker
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
}
// Add the map initialize function to the window load function
google.maps.event.addDomListener(window,"load", initialize);
}

以前的答案对我来说不太好。通过设置标记，我一直遇到问题。所以我稍微修改了代码。

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ANSI" />
Google Maps Multiple Markers
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript">
</head>
<body>

<script type="text/javascript">
var locations = [
['Goettingen', 51.54128040000001, 9.915803500000038, 'http://www.google.de'],
['Kassel', 51.31271139999999, 9.479746100000057,0, 'http://www.stackoverflow.com'],
['Witzenhausen', 51.33996819999999, 9.855564299999969,0, 'www.http://developer.mozilla.org.de']

];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(51.54376, 9.910419999999931),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
url: locations[i][4]
});

google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
window.location.href = this.url;
}
})(marker, i));

}

</body>
</html>

这样对我有效！
您可以从日期数据库创建Google地图路线链接，以将其用作交互式路线图。