複数のマーカーを持つURL

Question

&複数のマーカーを持つGoogle Maps APIを&の情報ウィンドウに表示しています。それは完全に動作します。今度は、CLICKの各マーカーに個別のURLを追加します。しかし何らかの理由で、すべてのマーカーが常に最後のURLを開きます。 - おそらく何が問題なのでしょうか？

\t  // Define your locations: HTML content for mouseover, the info window content, latitude, longitude, url 
 
\t  var locations = [ 
 
\t  ['<h8>Brugg</h8>', '<h7>auseinander.</h7>', 47.4867355, 8.2109103, 'http://www.stadtereignisse.ch/dokumentiert/'], 
 

 
\t  ['<h8>Aarau»</h8>', '<h7>Aarau</h7>', 47.391224, 8.038669, 'http://www.stadtereignisse.ch/erlebt/'], 
 

 
\t  ['<h8>Bern</h8>', '<h7>Bern</h7>', 46.947974, 7.447447, 'http://www.stadtereignisse.ch/erwuenscht/'] 
 
\t  ];

\t  // Add the markers and infowindows to the map 
 
\t  for (var i = 0; i < locations.length; i++) { 
 
\t  var marker = new google.maps.Marker({ 
 
\t   position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
 
\t  /* title: locations[i][0], */ 
 
\t \t url: "http://www.stadtereignisse.ch/dokumentiert/", 
 
\t   map: map, 
 
\t   visible: true, 
 
\t   icon: icons[iconCounter] 
 
\t  }); 
 
\t 
 
\t  markers.push(marker); 
 
\t 
 

 
\t  
 
\t 
 
\t // CLICK (Allow each marker to have an info window) 
 
google.maps.event.addListener(marker, 'click', function() { 
 
    window.location.href = marker.url; 
 
}); 
 

 

 

 
    // MOUSEOVER  
 
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
 
    return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
    } 
 
    })(marker, i)); \t   
 
\t  
 
     \t 
 
\t  
 
\t  iconCounter++; 
 
\t  // We only have a limited number of possible icon colors, so we may have to restart the counter 
 
\t  if(iconCounter >= iconsLength) { 
 
\t  \t iconCounter = 0; 
 
\t  } 
 
\t  }

Answer 1

あなたclickハンドラとあなたのmouseoverハンドラの違いを見てください。これらのうちの1つはクロージャを作成します。もう片方はしません。 clickのクロージャも作成する必要があります。

しかし、関数を返す関数の複雑な技法の代わりに、より洗練された方法があります。ループ本体全体を、ループから呼び出す1つの関数に移動するだけです。次に、マウスオーバー時に余分な複雑化は必要ありません（またはいずれかをクリックします）。

また、@ValLeNainが指摘したように、marker.urlには、マーカーごとに異なる値ではなくハードコードされた値が設定されています。そのため、希望する値に変更しました。

最後に、ユーザーエクスペリエンスのアドバイスの一部です。マウスオーバーでインフォボックスを開くことをおすすめしません。あなたが気付いたことがあるように、目に見える地図の上部にあるマーカーの情報ウィンドウを開くと、地図全体がシフトしてインフォ画面が表示されます。マウスオーバーによってその動きが引き起こされると、混乱し、驚くべきことです。 Infowindowは、マウスオーバーではなくクリックで開く必要があります。次に、情報ウィンドウのテキストの中にリンクを挿入したい場合、それを行うことができます。

私はこの問題を以下のコードでは扱いませんでしたが、並べ替えることはできます。

// Add the markers and infowindows to the map 
    for (var i = 0; i < locations.length; i++) { 
     addMarker(locations[i]); 
    } 

    function addMarker(location) { 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(location[2], location[3]), 
     title: location[0], 
     url: location[4], 
     map: map, 
     visible: true, 
     icon: icons[iconCounter] 
     }); 

     markers.push(marker); 

     // CLICK (Allow each marker to have an info window) 
     google.maps.event.addListener(marker, 'click', function() { 
      window.location.href = marker.url; 
     }); 

     // MOUSEOVER  
     google.maps.event.addListener(marker, 'mouseover', function() { 
     infowindow.setContent(location[0]); 
     infowindow.open(map, marker); 
     }); 

     iconCounter++; 
     // We only have a limited number of possible icon colors, so we may have to restart the counter 
     if(iconCounter >= iconsLength) { 
     iconCounter = 0; 
     } 
    }