Google Maps API：通过点击标记打开网址 [英] Google Maps API: open url by clicking on marker
问题描述
我想通过使用Google地图API 3单击标记来打开新窗口。
不幸的是，Google Maps API的示例并不多，我发现这个代码：
google.maps.event.addListener（marker，'click'，function（）{
window.location.href = marker.url;
}）;
当我用循环创建标记时如何使用它？
这是我的代码 - 我简单又简短：
pre> <！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：0; padding：0}
#map_canvas {height：100％}
< / style>
< script type =text / javascriptsrc =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]
];
函数setMarkers（地图，位置）{
var shape = {
坐标：[1,1,1,20,18,20,18,1]，
类型：'poly'
};
for（var i = 0; i< locations.length; i ++）{
var flag = new google.maps.MarkerImage（'markers /'+（i + 1）+ '.png'，
新增google.maps.Size（17,19），
新增google.maps.Point（0,0），
新增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，$ b $ shape：shape，
标题：place [0]，
zIndex：place [3]
}）;
函数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（地图，积分）;
}
< / script>
< / head>
< body onload =initialize（）>
< div id =map_canvasstyle =width：50％; height：50％>< / div>
< / body>
< / html>
如何通过点击上面的代码打开网址？
您可以为每个点添加一个特定的url，例如：
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']
];
将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 。
I want to open a new window by clicking on a marker using Google Maps API 3.
Unfortunately there are not many examples for the Google Maps API and I found out this code:
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
How to use it, when I create markers with a loop? I tried it in many ways with no afford.
This is my code – I made it simple and short:
<!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>
How to open url by clicking on marker with code above?
You can add a specific url to each point, e.g.:
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']
];
Add the url to the marker values in the for-loop:
var marker = new google.maps.Marker({
...
zIndex: place[3],
url: place[4]
});
Then you can add just before to the end of your for-loop:
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
Also see this example.
这篇关于Google Maps API：通过点击标记打开网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
