如何使用 javascript Google 地图 api 打开信息窗口

Question

下面的代码显示了我正在尝试做的事情。我试图通过单击在 createList() 中创建的 li 元素来打开每个信息窗口。这不起作用..它显示 'marker' 未定义，据我所知，但我不知道如何更正此问题。您可以在此处查看源代码和实时地图：http://home.messiah.edu/~dw1248/dev/lodgingTest.html

感谢任何帮助。提前致谢！

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: Roboto, Arial, sans-serif;
      }
      #map {
        width: 100%;
        height: 100%;
      }
      .list {
        width: 25%;
        height: 75%;
        z-index: 2;
        position: absolute;
        top: 10%; 
        left: 1.5%;
        background-color: white; 
        border-radius: 2px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
        font-size: 0.82em;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 48px;
        overflow: scroll;
      }
      li {
        list-style-type: none;
      }
      .listHeader {
        width: 25%;
        height: 40px;
        padding-left: 8px;
        padding-right: 8px;
        z-index: 3;
        position: absolute;
        top: 10%; 
        left: 1.5%;
        background-color: white; 
        border-radius: 3px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);  
      }
      .listHeader h1 {
        text-align: center;
        font-size: 1em;  
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
    <script>
      var map;
      var service;
      var infowindow;

      function initMap() {
          var messiah = {
              lat: 40.158350,
              lng: -76.987454
          };
          var center = {
              lat: 40.158350,
              lng: -77.076
          };
          map = new google.maps.Map(document.getElementById('map'), {
              center: center,
              zoom: 11
          });

          var marker = new google.maps.Marker({
              position: messiah,
              map: map,
              title: 'Messiah College'
          });

          var request = {
              location: messiah,
              radius: 10000,
              type: ['lodging']
          }

          service = new google.maps.places.PlacesService(map);
          service.nearbySearch(request, callback);
          infowindow = new google.maps.InfoWindow();


      }

      function callback(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            results.forEach(createMarker);
            results.forEach(createList);
          }
      }


      function createMarker(place) {
          var placeLoc = place.geometry.location;
          var marker = new google.maps.Marker({
              map: map,
              icon: {
                  url: 'http://maps.gstatic.com/mapfiles/circle.png',
                  anchor: new google.maps.Point(10, 10),
                  scaledSize: new google.maps.Size(10, 17)
              },
              position: place.geometry.location
          });

          ///////////Look Here To Start Next Time

          marker.addListener('click', function() {

            var request = {
                reference: place.reference
            };

            service.getDetails(request, function(details, status) {
            var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
            if (!!details.website) {content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'}
            if (!!details.rating) {content += '<br>' + 'Rating: ' + details.rating }
              infowindow.setContent(content);

              infowindow.open(map, marker);

            });

          });
      }

          function createList(place) {

    var request = {
        reference : place.reference,
    };

    service.getDetails(request, function(details, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {

            $('.list').append('<li class="listItem">' + details.name + '</li><br/>');
            $('.listItem').click(function() {

            var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
            if (!!details.website) {content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'}
            if (!!details.rating) {content += '<br>' + 'Rating: ' + details.rating }
            infowindow.setContent(content);
            infowindow.open(map, marker);
            });

        } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
            setTimeout(function() {
                createList(place);
            }, 200);
        }
    });
}



      window.onload = initMap;

    </script>
  </head>
  <body>
    <div id="map">

    </div>
    <div class="listHeader">
        <h1>Lodging List</h1>
    </div>
    <div class="list">

    <div>
  </body>
</html>

Answer 1

有两点，如果您想与标记进行交互，您应该将它们的引用保存在某个地方。这就是下面的 _markers 的原因。您还错误地分配了点击事件。您正在多次分配事件。希望这对您有所帮助，请检查下面的代码。

或在这里工作： http://codepen.io/ravish_hacker/pen/pyeMbL

<html>

<head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: Roboto, Arial, sans-serif;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        .list {
            width: 25%;
            height: 75%;
            z-index: 2;
            position: absolute;
            top: 10%;
            left: 1.5%;
            background-color: white;
            border-radius: 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
            font-size: 0.82em;
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 48px;
            overflow: scroll;
        }
        li {
            list-style-type: none;
        }
        .listHeader {
            width: 25%;
            height: 40px;
            padding-left: 8px;
            padding-right: 8px;
            z-index: 3;
            position: absolute;
            top: 10%;
            left: 1.5%;
            background-color: white;
            border-radius: 3px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(0, 0, 0, 0.02);
        }
        .listHeader h1 {
            text-align: center;
            font-size: 1em;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
    <script>
        var _markers = [];
        var map;
        var service;
        var infowindow;

        function initMap() {
            var messiah = {
                lat: 40.158350,
                lng: -76.987454
            };
            var center = {
                lat: 40.158350,
                lng: -77.076
            };
            map = new google.maps.Map(document.getElementById('map'), {
                center: center,
                zoom: 11
            });

            var marker = new google.maps.Marker({
                position: messiah,
                map: map,
                title: 'Messiah College'
            });

            var request = {
                location: messiah,
                radius: 10000,
                type: ['lodging']
            }

            service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);
            infowindow = new google.maps.InfoWindow();


        }

        function callback(results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                    createList(results[i], i);
                }
                //results.forEach(createMarker);
                //results.forEach(createList);
            }
        }


        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                icon: {
                    url: 'http://maps.gstatic.com/mapfiles/circle.png',
                    anchor: new google.maps.Point(10, 10),
                    scaledSize: new google.maps.Size(10, 17)
                },
                position: place.geometry.location
            });
            _markers.push(marker);
            ///////////Look Here To Start Next Time

            marker.addListener('click', function() {

                var request = {
                    reference: place.reference
                };

                service.getDetails(request, function(details, status) {
                    var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
                    if (!!details.website) {
                        content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'
                    }
                    if (!!details.rating) {
                        content += '<br>' + 'Rating: ' + details.rating
                    }
                    infowindow.setContent(content);

                    infowindow.open(map, marker);

                });

            });
        }

        function createList(place, index) {

            var request = {
                reference: place.reference,
            };

            service.getDetails(request, function(details, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {

                    $('.list').append('<li class="listItem" id = "' + details.place_id + '"">' + details.name + '</li><br/>');
                    $('#' + details.place_id).click(function() {

                        var content = '<div><strong>' + details.name + '</strong><br>' + details.formatted_address + '<br>' + details.formatted_phone_number;
                        if (!!details.website) {
                            content += '<br><a href=' + details.website + ' target= "_blank"> Website </a>'
                        }
                        if (!!details.rating) {
                            content += '<br>' + 'Rating: ' + details.rating
                        }
                        infowindow.setContent(content);
                        console.log(index);
                        infowindow.open(map, _markers[index]);
                    });

                } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    setTimeout(function() {
                        createList(place);
                    }, 200);
                }
            });
        }



        window.onload = initMap;
    </script>
</head>

<body>
    <div id="map">
    </div>
    <div class="listHeader">
        <h1>Lodging List</h1>
    </div>
    <div class="list">
        <div>
</body>

</html>

如何使用 javascript Google 地图 api 打开信息窗口

How to open infowindows with javascript Google maps api

javascript

google-maps

infowindow