Google Maps API：通过单击标记打开 url
Posted
技术标签:
【中文标题】Google Maps API：通过单击标记打开 url【英文标题】：Google Maps API: open url by clicking on marker 【发布时间】：2012-02-04 21:33:54 【问题描述】：我想通过点击使用 Google Maps API 3 的标记打开一个新窗口。
不幸的是，Google Maps API 的示例并不多，我发现了这段代码：
google.maps.event.addListener(marker, 'click', function()
window.location.href = marker.url;
);
当我使用循环创建标记时，如何使用它？我尝试了很多方法，但都买不起。
这是我的代码——我让它变得简单而简短：
<!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>
<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);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>
如何通过点击上面代码的标记打开url？
【问题讨论】：
【参考方案1】：您可以为每个点添加特定的网址，例如：
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.***.com']
];
将 url 添加到 for 循环中的标记值：
var marker = new google.maps.Marker(
...
zIndex: place[3],
url: place[4]
);
然后您可以在 for 循环的末尾添加之前：
google.maps.event.addListener(marker, 'click', function()
window.location.href = this.url;
);
另见example。
【讨论】：
感谢您的回复。这样，每个标记都会打开最后一个 url。我试过这个并没有找到修复它的方法。我检查了您的示例（上面的链接）：据我所知：存在同样的问题 - 当您单击标记时，每个标记都有“*** 链接”。 这真是太棒了！有用。我认为问题出在听众的位置不对。非常感谢。 不客气。如果您对答案感到满意，请将其标记为正确答案。 完成。 （我只是在阅读常见问题解答以了解如何标记正确答案。）谢谢。 我在添加新代码后注意到一个问题：当鼠标悬停在标记上时，没有标记的名称提示。在更改完成之前：有标记的名称“onmouseover”：“name1”、“name2”。 （示例（上面的链接）也有这个问题。）【参考方案2】：url 不是 Marker 类的对象。但是没有什么能阻止你将它作为属性添加到该类中。我猜你正在看的任何例子也是这样做的。您想为每个标记使用不同的 URL 吗？当你这样做时会发生什么：
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;
);
【讨论】：
感谢您的回复。我之前和今天都试过了。这样，每个标记都具有相同的 url。但这并不是我所需要的。我需要不同的网址。如何将url1设置为marker1，将url2设置为marker2？ 它是如何解决的？我有一个类似的项目，每次标记点击都必须在 div 中打开一个函数。【参考方案3】：google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
window.location.href = marker.url;
)(marker, i));
【讨论】：
您好！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。【参考方案4】：如果有人想在不需要 for 循环的单个标记上添加 URL，方法如下：
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);
【讨论】：
【参考方案5】： function loadMarkers()
% for location in object_list %
var point = new google.maps.LatLng(location.latitude,location.longitude);
var marker = new google.maps.Marker(
position: point,
map: map,
url: location.id,
);
google.maps.event.addDomListener(marker, 'click', function()
window.location.href = this.url; );
% endfor %
【讨论】：
这就是我通过对象循环得到的结果【参考方案6】：以前的答案对我来说并不好。通过设置标记，我遇到了持续存在的问题。所以我稍微修改了代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ANSI" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1500px; height: 1000px;"></div>
<script type="text/javascript">
var locations = [
['Goettingen', 51.54128040000001, 9.915803500000038, 'http://www.google.de'],
['Kassel', 51.31271139999999, 9.479746100000057,0, 'http://www.***.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));
</script>
</body>
</html>
这种方法对我有用！ 您可以从您的 Datebase 创建 Google Maps 路由链接，以将其用作交互式路由图。
【讨论】：
以上是关于Google Maps API：通过单击标记打开 url的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps API v3 - 单击标记时如何“提醒”标记ID [重复]
如何使用 react-google-maps 通过单击在地图上添加标记？
关闭 Google Maps API v3 中的所有信息窗口