谷歌地圖API v.3多標記infowindows

-1

我已經看了很多這裏的類似問題，但還沒有找到任何回答我的問題。我是JS和GoogleMaps API v3的新手，並已成功地遵循他們的教程來實現這一目標。但是，我想要根據點擊哪個標記來顯示自定義內容的infowindow，但我無法弄清楚如何執行此操作。我也想用大約100個標記來做到這一點，所以我想知道最好的方法來做到這一點，而不會太麻煩。清楚的是，有三種類型的圖標，但最終會有很多標記與每個圖標相關聯，所以我需要鏈接到每個「功能」的內容。希望我在這裏有一個好的開始，並且沒有離開基地。我已經包含了該頁面的代碼。提前感謝您提供任何幫助。谷歌地圖API v.3多標記infowindows

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #map_canvas { 
     width: 800px; 
     height: 500px; 
     background-color:#CCC; 
     } 
     #legend { 
     font-family: Arial, sans-serif; 
     background: #fff; 
     padding: 10px; 
     margin: 10px; 
     border: 3px solid #000; 
     } 
     #legend img { 
     vertical-align: middle; 
     } 
    </style> 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script> 
     function initialize() { 
     var map_canvas = document.getElementById('map_canvas'); 
     var map_options = { 
      center: new google.maps.LatLng(33.137551,-0.703125), 
      zoom: 2, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(map_canvas, map_options); 
     map.set('styles', [ 
     { 
      featureType: 'road', 
      elementType: 'geometry', 
      stylers: [ 
      { color: '#888888' }, 
      { weight: 1.0 } 
      ] 
     }, { 
      featureType: 'landscape', 
      elementType: 'geometry.fill', 
      stylers: [ 
      { hue: '#008f11' }, 
      { gamma: 1.0 }, 
      { saturation: 0 }, 
      { lightness: -10 } 
      ]  
     }, { 
      featureType: 'water', 
      elementType: 'geometry.fill', 
      stylers: [ 
      { hue: '#054d8fd' }, 
      { gamma: 1.0 }, 
      { saturation: 0 }, 
      { lightness: -10 } 
      ]  
     }, { 
      featureType: 'poi', 
      elementType: 'geometry', 
      stylers: [ 
       { visibility: 'off' } 
      ] 
      } 
     ]); 
     var iconBase = 'http://i1318.photobucket.com/albums/t658/greatergoodorg/'; 
     var icons = { 
      people: { 
       name: 'People', 
       icon: iconBase + 'people_zps26d13009.png', 
       shadow: iconBase + 'shadow-people_zps4b39eced.png' 
      }, 
      pets: { 
       name: 'Pets', 
       icon: iconBase + 'pets_zps15f549f2.png', 
       shadow: iconBase + 'shadow-pets_zps361068aa.png' 
      }, 
      planet: { 
       name: 'Planet', 
       icon: iconBase + 'planet_zps2a8572ce.png', 
       shadow: iconBase + 'shadow-planet_zps9912e26b.png', 
      } 
     }; 
     var data = ["This is the first one", "This is the second one", "This is the third one"]; 
     function addMarker(feature) { 
      var marker = new google.maps.Marker({ 
       position: feature.position, 
       icon: icons[feature.type].icon, 
       shadow: { 
        url: icons[feature.type].shadow, 
        anchor: new google.maps.Point(21, 32) 
       }, 
       animation: google.maps.Animation.DROP, 
       map: map 
      }); 
      /*... 
      google.maps.event.addListener(marker, "click", function() { 
       infowindow.open(map,marker); 
      }); 
      ...*/ 
     /*... 
     google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(8); 
     map.setCenter(marker.getPosition()); 
     }); 
     ...*/ 
     } 
     var features = [ 
      { 
      position: new google.maps.LatLng(33.137551,-0.703125), 
      type: 'planet' 
      }, 
      { 
      position: new google.maps.LatLng(44.234234,-0.232233), 
      type: 'pets' 
      }, 
      { 
      position: new google.maps.LatLng(54.234234,-0.032233), 
      type: 'people' 
      } 
      ]; 
     for (var i = 0, feature; feature = features[i]; i++) { 
      addMarker(feature); 
      } 
     var legend = document.getElementById('legend'); 
     for (var key in icons) { 
      var type = icons[key]; 
      var name = type.name; 
      var icon = type.icon; 
      var div = document.createElement('div'); 
      div.innerHTML = '<img src="' + icon + '"> ' + name; 
      legend.appendChild(div); 
     } 
     map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(
     document.getElementById('legend')); 
    } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script>   
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    <div id="legend"><strong>Project Types</strong></div> 
    </body> 
</html>

來源

2013-06-12 Noah Horton

「類型」的字符串你在哪裏設置信息窗口的內容？你在哪裏定義infowindow？ – geocodezip

這將打開信息窗口並顯示它

var infowindow = new google.maps.InfoWindow(); 

function addMarker(feature) { 
    var marker = new google.maps.Marker({ 
     position: feature.position, 
     icon: icons[feature.type].icon, 
     shadow: { 
      url: icons[feature.type].shadow, 
      anchor: new google.maps.Point(21, 32) 
     }, 
     animation: google.maps.Animation.DROP, 
     map: map 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
    infowindow.setContent(feature.type); 
     infowindow.open(map,marker); 
    }); 
}

來源

2013-06-12 02:56:30 geocodezip

太棒了！我正在尋找的是顯示一些其他類型的自定義內容的方式。因此，如果我想讓「寵物」圖標說出 - 「我喜歡貓」，人們可以說 - 「我喜歡人」等等。但是，這不應該與feature.type綁定，而應該與針。我希望能夠複製大約100個標記。 –

感謝您指點我的文檔，我非常感謝幫助。 –

感謝您的幫助。我有事情按我希望的方式工作。我現在將一個名爲「data」的字符串存儲在信息窗口中，我懷疑可能有更好的方法來顯示HTML，如果這對你來說看起來不錯，你能告訴我一些什麼嗎？ VAR特徵= [{ 位置：新google.maps.LatLng（33.137551，-0.703125）類型： '行星'， \t \t \t數據： 'check it out一個
' } \t \t]; –

谷歌地圖API v.3多標記infowindows

回答

相關問題