谷歌地图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

回答

相关问题