谷歌地图API：打开URL点击标记

点击一个标记，遗憾的是没有为谷歌地图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？

来源

2012-01-07 idobr

您可以将特定的网址添加到每个点，如：

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循环：

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。

来源

2012-01-07 14:17:32 scessor

感谢您的回复。通过这种方式，每个标记都会打开最后一个网址。我试过这个，并没有找到解决的办法。我检查了你的例子（上面的链接）：据我可以判断：也有同样的问题 - 当你点击标记有每个标记“stackoverflow链接”。 – idobr 2012-01-07 21:16:44

对不起，你是对的，我已经更新了我的答案。 – scessor 2012-01-07 21:44:31

这真的太棒了！有用。我认为问题出在倾听者的地方。非常感谢你。 – idobr 2012-01-07 22:22:51

url不是标记类中的对象。但是没有任何东西阻止你将它作为属性添加到该类中。我猜你看到的任何例子都是这样做的。你想为每个标记使用不同的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; 
    }); 
}

来源

2012-01-07 13:25:18 duncan

谢谢你的回复。我之前和今天再次尝试过这一点。这样每个标记都具有相同的网址。但这并不是我所需要的。我需要不同的网址。如何将url1设置为marker1和url2到marker2？ – idobr 2012-01-07 21:05:12

这个问题是由scessor的建议解决的。 – idobr 2012-01-07 22:25:23

-1

以前的答案没有为我工作。我通过设置标记持续存在问题。所以我稍微改变了代码。

<!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.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)); 

    } 

    </script> 
    </body> 
    </html>

这种方式对我来说很有效！您可以从数据库创建Google Maps路由链接，以将其用作交互式路由图。

来源

2016-12-22 13:33:28 Hanneshinterseher

谷歌地图API：打开URL点击标记

回答

相关问题