Fatal编程技术网
  • javascript/
  • Javascript 我的商店定位器中的“需要帮助信息”窗口（PHP和JS）

Javascript 我的商店定位器中的“需要帮助信息”窗口（PHP和JS）

javascript php google-maps

Javascript 我的商店定位器中的“需要帮助信息”窗口（PHP和JS）,javascript,php,google-maps,Javascript,Php,Google Maps,这段代码的问题是，当我将鼠标悬停在标记上时，info窗口仅显示数组最后一个条目的信息。尝试了一些事情，比如在for循环中移动var infowindow。但是，这会导致所有标记消失 我用PHP和Javascript制作这个页面。此外，出于隐私考虑，我没有使用密钥复制谷歌地图API 希望有人能帮我解决这个问题。 提前谢谢你的帮助 <div class="container-fluid"> <div class="row"> <div class

这段代码的问题是，当我将鼠标悬停在标记上时，info窗口仅显示数组最后一个条目的信息。尝试了一些事情，比如在for循环中移动var infowindow。但是，这会导致所有标记消失

我用PHP和Javascript制作这个页面。此外，出于隐私考虑，我没有使用密钥复制谷歌地图API

希望有人能帮我解决这个问题。 提前谢谢你的帮助

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-7 col-sm-11 col-xs-11" id="map"></div>
        <script>

            function initMap() {
                //coordinaten van de center
                var myLatLng = {lat: 52.132633, lng: 5.291266};

                //coordinaten van alle winkels
                var winkels = [
                    ['Suitable Hoofdkwartier', 51.706164, 5.340917, 'Stadionlaan 162-165 <br /> 5346JT <br /> Rosmalen'],
                    ['Suitable Maastricht', 50.848986, 5.692262, 'Achter het Vleeshuis 5 <br /> 6211GR <br /> Maastricht'],
                    ['Suitable Leiden', 52.158294, 4.492075, 'Nieuwe Rijn 20 <br /> 2312JC <br /> Leiden'],
                    ['Suitable Amsterdam', 52.367416, 4.889072, 'Singel 466 <br /> 1017AW <br /> Amsterdam'],
                    ['Suitable Den Bosch', 51.688077, 5.302443, 'Schapenmarkt 18 <br /> 5211ET <br /> Den Bosch'],          
                    ['Suitable Groningen', 53.218488, 6.570253, 'Brugstraat 3 <br /> 9712AA <br /> Groningen'],
                    ['Suitable Utrecht', 52.091057, 5.120239, 'Vismarkt 11 <br /> 3511KS <br /> Utrecht'],
                    ['Suitable Breda', 51.588345, 4.777341, 'Veemarktstraat 13 <br /> 4811ZB <br /> Breda'],
                    ['Suitable Haarlem', 52.382709, 4.635163, 'Barteljorisstraat 8 <br /> 2011RB <br /> Haarlem'],
                    ['Suitable Den Haag', 52.077851, 4.308998, 'Dagelijkste Groenmarkt 25 <br /> 2513AL <br /> Den Haag'],
                    ['Suitable Arnhem', 51.980305, 5.908369, 'Bakkerstraat 18a <br /> 6811EG <br /> Arnhem'],
                    ['Suitable Rotterdam', 51.923633, 4.485226, 'Meent 29a <br /> 3011JC <br /> Rotterdam'],
                    ['Suitable Oisterwijk', 51.581049, 5.19771, 'De Lind 9 <br /> 5061HS <br /> Oisterwijk'],
                    ['Suitable Zwolle', 52.511483, 6.091013, 'Luttekestraat 36 <br /> 8011LR <br /> Zwolle'],
                    ['Suitable Tilburg Outlet', 51.555268, 5.083966, 'Heuvelstraat 113 <br /> 5038AD <br /> Tilburg'],
                    ['Suitable Nijmegen', 51.844546, 5.863493, 'Molenstraat 39 <br /> 6511HA <br /> Nijmegen'],
                    ['Suitable Eindhoven', 51.437658, 5.475491, 'Kleine Berg 11 <br /> 5611JS <br /> Eindhoven']
                ];

                //generen van de map
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 7,
                    center: myLatLng
                });

                //marker icons
                var image = 'http://suitableshop.customer.cloud.nl/httpdocs/templates/suitable/images/markers/marker-suitable.png';
                var testimg = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

                //content van het info schermpje
                var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    'Suitable Hoofdkwartier'+
                    '<div id="bodyContent">'+
                    '<p>Stadionlaan 162-165' +
                    ' 5246 JT'+
                    'Rosmalen </p>'+
                    '</div>'+
                    '</div>';




                for (var i = 0; i < winkels.length; i++) {
                  var winkel = winkels[i];
                  var adres = winkels[i][3];
                  var marker = new google.maps.Marker({
                    position: {lat: winkel[1], lng: winkel[2]},
                    map: map,
                    //icon: image,
                    title: winkel[0]


                  });

                  //toevoegen van een info schermpje
                    var infowindow = new google.maps.InfoWindow({
                        content: adres
                    });

                  //functie voor het open van de info schermpje als er op geklikt is
                  marker.addListener('mouseover', function() {
                    infowindow.open(marker.get('map'), marker)
                    infowindow.setPosition(marker)
                  });

                  marker.addListener('mouseout', function() {
                    infowindow.close();            
                  });

                  //functie die ervoor zorgt dat wanneer er op een marker geklikt wordt er wordt ingezoomd op de locatie van de marker
                  marker.addListener('click', function() {
                    map.setZoom(25);
                    map.setCenter(marker.getPosition());
                  });
            }}

        </script>


函数initMap（）{
//范德中心协调人
var Mylatng={lat:52.132633，lng:5.291266}；
//van alle winkels协调人
var winkels=[
[51.706164，5.340917，Stadionlaan 162-165
5346JT
罗斯马伦''，
[“适合马斯特里赫特”，50.848986，5.692262，'Achter het Vleeshuis 5
6211GR
马斯特里赫特'，
[“合适的莱顿”，52.158294，4.492075，“Nieuwe Rijn 20
2312JC
莱顿]，
[“合适的阿姆斯特丹”，52.367416，4.889072，“Singel 466
1017AW
阿姆斯特丹]，
[51.688077，5.302443，'Schapenmarkt 18
5211ET
登博世'，
[“合适的格罗宁根”，53.218488，6.570253，“Brugstraat 3
9712AA
格罗宁根]，
[“乌得勒支适宜”，52.091057，5.120239，'Vismarkt 11
3511KS
乌得勒支'，
[“合适的布雷达”，51.588345，4.777341，'Veemarktstraat 13
4811ZB
布雷达'，
[“合适的哈勒姆”，52.382709，4.635163，'Barteljorisstraat 8
2011RB
哈勒姆'，
[“合适的哈格”，52.077851，4.308998，“达格利杰克斯特格罗恩马克特25
2513AL
哈格”，
[“合适的阿纳姆”，51.980305，5.908369，“Bakkerstraat 18a
6811EG
阿纳姆]，
[“合适的鹿特丹”，51.923633，4.485226，“Meent 29a
3011JC
鹿特丹]，
[适当的Oisterwijk'，51.581049，5.19771，'德林9
5061HS
Oisterwijk']，
[“合适的Zwolle”，52.511483，6.091013，“Luttekestraat 36
8011LR
Zwolle']，
[“合适的蒂尔堡出口”，51.555268，5.083966，'Heuvelstraat 113
5038AD
蒂尔堡'，
[“合适的奈梅根”，51.844546，5.863493，“分子量为39
6511HA
奈梅根]，
[“合适的埃因霍温”，51.437658，5.475491，'Kleine Berg 11
5611JS
埃因霍温']
];
//范德普将军
var map=new google.maps.map（document.getElementById（'map'）{
缩放：7，
中心：myLatLng
});
//标记图标
var图像处理http://suitableshop.customer.cloud.nl/httpdocs/templates/suitable/images/markers/marker-suitable.png';
var testimg=https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
//内容范赫特信息schermpje
var contentString=''+
''+
''+
“合适的马蹄铁”+
''+
“Stadionlaan 162-165”+
“5246 JT”+
“罗斯曼”+
''+
'';
对于（变量i=0；i
您需要用以下代码替换标记侦听器代码，同时保持其他所有代码不变：

//functie voor het open van de info schermpje als er op geklikt is  
google.maps.event.addListener(marker,'mouseover', (function(marker,infowindow){ 
    return function() {
        infowindow.open(map,marker);
    };
})(marker,infowindow));  

google.maps.event.addListener(marker,'mouseout', (function(marker,infowindow){ 
    return function() {
        infowindow.close();  
    };
})(marker,infowindow)); 

//functie die ervoor zorgt dat wanneer er op een marker geklikt wordt er wordt ingezoomd op de locatie van de marker
google.maps.event.addListener(marker,'click', (function(marker){ 
    return function() {
        map.setZoom(25);
        map.setCenter(marker.getPosition());
    };
})(marker));
完整的代码是：

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-7 col-sm-11 col-xs-11" id="map"></div>
    <script>

        function initMap() {
            //coordinaten van de center
            var myLatLng = {lat: 52.132633, lng: 5.291266};

            //coordinaten van alle winkels
            var winkels = [
                ['Suitable Hoofdkwartier', 51.706164, 5.340917, 'Stadionlaan 162-165 <br /> 5346JT <br /> Rosmalen'],
                ['Suitable Maastricht', 50.848986, 5.692262, 'Achter het Vleeshuis 5 <br /> 6211GR <br /> Maastricht'],
                ['Suitable Leiden', 52.158294, 4.492075, 'Nieuwe Rijn 20 <br /> 2312JC <br /> Leiden'],
                ['Suitable Amsterdam', 52.367416, 4.889072, 'Singel 466 <br /> 1017AW <br /> Amsterdam'],
                ['Suitable Den Bosch', 51.688077, 5.302443, 'Schapenmarkt 18 <br /> 5211ET <br /> Den Bosch'],          
                ['Suitable Groningen', 53.218488, 6.570253, 'Brugstraat 3 <br /> 9712AA <br /> Groningen'],
                ['Suitable Utrecht', 52.091057, 5.120239, 'Vismarkt 11 <br /> 3511KS <br /> Utrecht'],
                ['Suitable Breda', 51.588345, 4.777341, 'Veemarktstraat 13 <br /> 4811ZB <br /> Breda'],
                ['Suitable Haarlem', 52.382709, 4.635163, 'Barteljorisstraat 8 <br /> 2011RB <br /> Haarlem'],
                ['Suitable Den Haag', 52.077851, 4.308998, 'Dagelijkste Groenmarkt 25 <br /> 2513AL <br /> Den Haag'],
                ['Suitable Arnhem', 51.980305, 5.908369, 'Bakkerstraat 18a <br /> 6811EG <br /> Arnhem'],
                ['Suitable Rotterdam', 51.923633, 4.485226, 'Meent 29a <br /> 3011JC <br /> Rotterdam'],
                ['Suitable Oisterwijk', 51.581049, 5.19771, 'De Lind 9 <br /> 5061HS <br /> Oisterwijk'],
                ['Suitable Zwolle', 52.511483, 6.091013, 'Luttekestraat 36 <br /> 8011LR <br /> Zwolle'],
                ['Suitable Tilburg Outlet', 51.555268, 5.083966, 'Heuvelstraat 113 <br /> 5038AD <br /> Tilburg'],
                ['Suitable Nijmegen', 51.844546, 5.863493, 'Molenstraat 39 <br /> 6511HA <br /> Nijmegen'],
                ['Suitable Eindhoven', 51.437658, 5.475491, 'Kleine Berg 11 <br /> 5611JS <br /> Eindhoven']
            ];

            //generen van de map
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 7,
                center: myLatLng
            });

            //marker icons
            var image = 'http://suitableshop.customer.cloud.nl/httpdocs/templates/suitable/images/markers/marker-suitable.png';
            var testimg = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

            //content van het info schermpje
            var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                'Suitable Hoofdkwartier'+
                '<div id="bodyContent">'+
                '<p>Stadionlaan 162-165' +
                ' 5246 JT'+
                'Rosmalen </p>'+
                '</div>'+
                '</div>';




            for (var i = 0; i < winkels.length; i++) {
              var winkel = winkels[i];
              var adres = winkels[i][3];
              var marker = new google.maps.Marker({
                position: {lat: winkel[1], lng: winkel[2]},
                map: map,
                //icon: image,
                title: winkel[0]


              });

              //toevoegen van een info schermpje
                var infowindow = new google.maps.InfoWindow({
                    content: adres
                });

              //functie voor het open van de info schermpje als er op geklikt is  
            google.maps.event.addListener(marker,'mouseover', (function(marker,infowindow){ 
                return function() {
                    infowindow.open(map,marker);
                };
            })(marker,infowindow));  

            google.maps.event.addListener(marker,'mouseout', (function(marker,infowindow){ 
                return function() {
                    infowindow.close();  
                };
            })(marker,infowindow)); 

            //functie die ervoor zorgt dat wanneer er op een marker geklikt wordt er wordt ingezoomd op de locatie van de marker
            google.maps.event.addListener(marker,'click', (function(marker){ 
                return function() {
                    map.setZoom(25);
                    map.setCenter(marker.getPosition());
                };
            })(marker));
        }}

    </script>


函数initMap（）{
//范德中心协调人
var Mylatng={lat:52.132633，lng:5.291266}；
//van alle winkels协调人
var winkels=[
[51.706164，5.340917，Stadionlaan 162-165
5346JT
罗斯马伦''，
[“适合马斯特里赫特”，50.848986，5.692262，'Achter het Vleeshuis 5
6211GR
马斯特里赫特'，
[“合适的莱顿”，52.158294，4.492075，“Nieuwe Rijn 20
2312JC
莱顿]，
[“合适的阿姆斯特丹”，52.367416，4.889072，“Singel 466
1017AW
阿姆斯特丹]，
[51.688077，5.302443，'Schapenmarkt 18
5211ET
登博世'，
[“合适的格罗宁根”，53.218488，6.570253，“Brugstraat 3
9712AA
格罗宁根]，
['Suita