JavaScript问题？谷歌地图。信息窗口

时间：2013-02-26 13:17:43

标签： javascript html google-maps google-maps-markers infowindow

以下代码是使用JavaScript放置在Google地图上的placemarkkers。我的问题是，我希望在每个地标上点击鼠标后调用一个infoWindow，但不能让infoWindow出现在Alnwick Gardens的更多条目上。

我确信它是一个快速解决方案，但无法弄明白，我尝试过的任何东西似乎都没有用。可能归结为糟糕的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>

任何帮助都将受到极大的赞赏。感谢

2 个答案:

答案 0 :(得分：1)

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

参见章节：闭包

答案 1 :(得分：1)

尝试为每个标记添加侦听器。例如，对于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);
        }
       }
});

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

相关问题
最新问题