JavaScript问题？谷歌地图。 infoWindows

以下代码是使用JavaScript放置在Google地图上的地图标记。我的问题是，我希望在鼠标点击每个地标时启用一个infoWindow，但不能让infoWindow出现在比Alnwick Gardens条目更多的地方。JavaScript问题？谷歌地图。 infoWindows

我相信它的一个快速修复，但无法弄清楚，没有任何我已经尝试似乎工作。可能只是糟糕的JavaScript技能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css"> 
      html { height: 100%} 
      body { height: 100%; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;font-size:10pt;} 
      #map_canvas { height: 100% } 

      #content { 

      } 
    </style> 

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     function initialize() { 
      var latlng = new google.maps.LatLng(55.140425,-1.643829); 
      var settings = { 
       zoom: 10, 
       center: latlng, 
       mapTypeControl: true, 
       mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
       navigationControl: true, 
       navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
       mapTypeId: google.maps.MapTypeId.ROADMAP}; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 
      var contentString = '<div id="content">'+ 
       '<div id="siteNotice">'+ 
       '</div>'+ 
       '<h1 id="firstHeading" class="firstHeading">Alnwick Gardens</h1>'+ 
       '<div id="bodyContent">'+ 
       '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+ 
       '</div>'+ 
       '</div>'; 
      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 

      var companyImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50)); 

      var companyPos = new google.maps.LatLng(55.41535,-1.694795); 

      var companyMarker = new google.maps.Marker({ 
       position: companyPos, 
       map: map, 
       icon: companyImage, 
       shadow: companyShadow, 
       title:"Alnwick Gardens", 
       zIndex: 3}); 


      var trainImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var trainPos = new google.maps.LatLng(54.881742,-1.6589); 

      var trainMarker = new google.maps.Marker({ 
       position: trainPos, 
       map: map, 
       icon: trainImage, 
       shadow: trainShadow, 
       title:"Beamish Hall Hotel, County Durham", 
       zIndex: 2 
      }); 

      var parkingImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var parkingShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var parkingPos = new google.maps.LatLng(54.696009,-1.18378); 

      var parkingMarker = new google.maps.Marker({ 
       position: parkingPos, 
       map: map, 
       icon: parkingImage, 
       shadow: parkingShadow, 
       title:"Borough Hall, Hartlepool", 
       zIndex: 1 
      }); 
      var trainImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var trainPos = new google.maps.LatLng(54.741519,-1.519296); 

      var trainMarker = new google.maps.Marker({ 
       position: trainPos, 
       map: map, 
       icon: trainImage, 
       shadow: trainShadow, 
       title:"Bowburn Hall", 
       zIndex: 2 
      }); 
      var trainImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var trainPos = new google.maps.LatLng(54.987242,-1.802942); 

      var trainMarker = new google.maps.Marker({ 
       position: trainPos, 
       map: map, 
       icon: trainImage, 
       shadow: trainShadow, 
       title:"Close House Golf Club", 
       zIndex: 2 
      }); 
      var trainImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var trainPos = new google.maps.LatLng(55.040147,-1.817086); 

      var trainMarker = new google.maps.Marker({ 
       position: trainPos, 
       map: map, 
       icon: trainImage, 
       shadow: trainShadow, 
       title:"Dissington Hall, Northumberland", 
       zIndex: 2 
      }); 
      var trainImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var trainPos = new google.maps.LatLng(55.512687,-1.705022); 

      var trainMarker = new google.maps.Marker({ 
       position: trainPos, 
       map: map, 
       icon: trainImage, 
       shadow: trainShadow, 
       title:"Doxford Hall, Northumberland", 
       zIndex: 2 
      }); 
      var trainImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var trainPos = new google.maps.LatLng(54.773588,-1.57667); 

      var trainMarker = new google.maps.Marker({ 
       position: trainPos, 
       map: map, 
       icon: trainImage, 
       shadow: trainShadow, 
       title:"Durham Castle", 
       zIndex: 2 
      }); 
      var trainImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var trainPos = new google.maps.LatLng(54.935575,-1.608303); 

      var trainMarker = new google.maps.Marker({ 
       position: trainPos, 
       map: map, 
       icon: trainImage, 
       shadow: trainShadow, 
       title:"Eslington Villa, Gateshead", 
       zIndex: 2 
      }); 
      var trainImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var trainPos = new google.maps.LatLng(54.953396,-1.656384); 

      var trainMarker = new google.maps.Marker({ 
       position: trainPos, 
       map: map, 
       icon: trainImage, 
       shadow: trainShadow, 
       title:"Federation Brewery, Gateshead", 
       zIndex: 2 
      }); 



      /*Example Tab Code*/ 


      var trainImage = new google.maps.MarkerImage('images/logo.png', 
       new google.maps.Size(100,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(50,50) 
      ); 

      var trainShadow = new google.maps.MarkerImage('images/logo_shadow.png', 
       new google.maps.Size(130,50), 
       new google.maps.Point(0,0), 
       new google.maps.Point(65, 50) 
      ); 

      var trainPos = new google.maps.LatLng(54.884735, -1.366491); 


      var trainMarker = new google.maps.Marker({ 
       position: trainPos, 
       map: map, 
       icon: trainImage, 
       shadow: trainShadow, 
       title:"Example", 
       zIndex: 2 
      }); 


      /*Example Tab Code*/ 

      google.maps.event.addListener(companyMarker, 'click', function() { 
       infowindow.open(map,companyMarker); 
      }); 
     } 
    </script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

任何帮助将非常感激。由于

来源

2013-02-26 Paul

它不是一朝一夕=/ – 2013-02-26 13:35:05

感谢您的...：/ – Paul 2013-02-26 13:40:21

它会帮助你 http://stackoverflow.com/questions/5868903/marker-content-infowindow-google-maps – arjuncc 2013-02-26 13:42:53

此链接将帮助您：http://www.svennerberg.com/2012/03/adding-multiple-markers-to-google-maps-from-json/

见第四章：瓶盖

来源

2013-02-26 13:22:45 Ruud

+1对于良好的参考 – arjuncc 2013-02-26 13:45:11

尝试增加听众每个标记。因此，例如用于companyMarker

var companyMarker = new google.maps.Marker({ 
     position: companyPos, 
     map: map, 
     icon: companyImage, 
     shadow: companyShadow, 
     title:"Alnwick Gardens", 
     zIndex: 3, 
     listeners: { 
     click: function(e){ 
      var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
      }); 
      infowindow.open(map, companyMarker); 
     } 
     } 
});

它不是测试的解决方案。总结您需要为每个标记添加点击事件。

来源

2013-02-26 17:11:19 Ankit

JavaScript问题？谷歌地图。 infoWindows

回答

相关问题