谷歌地圖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點擊標記

回答

相關問題