未显示包含地点详细信息的信息窗口

Question

我创建了一个城市特定的电影制作公司定位器。我正在使用附近搜索服务，对所有地点进行分页。在此之前，一切正常。现在，我正在尝试添加 getDetails 服务以在信息窗口中显示公司信息。不幸的是，我没有弄清楚如何为每个标记显示一个信息窗口，其中包含来自getDetails服务的数据。如果有人能帮助我解决我的问题，我将不胜感激！我把代码放在下面！      var map;      var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';      var labelIndex = 0;      function initMap() {        // Create the map.        var duesseldorf = {lat: 51.2277, lng: 6.7735};        map = new google.maps.Map(document.getElementById('map'), {          center: duesseldorf,          zoom: 12        });        // Create the places service.        var service = new google.maps.places.PlacesService(map);        var getNextPage = null;        var moreButton = document.getElementById('more');        moreButton.onclick = function() {          moreButton.disabled = true;          if (getNextPage) getNextPage();        };                // Perform a nearby search.        service.nearbySearch(            {location: duesseldorf, radius: 14000, keyword: ['filmproduktion']},            function(results, status, pagination) {              if (status !== 'OK') return;              createMarkers(results);              moreButton.disabled = !pagination.hasNextPage;              getNextPage = pagination.hasNextPage && function() {                pagination.nextPage();              };            });        }        //display place details in info window        var request = {            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',            fields: ['name', 'formatted_address', 'place_id', 'geometry']          };            var infowindow = new google.maps.InfoWindow();          var service = new google.maps.places.PlacesService(map);            service.getDetails(request, function(place, status) {            if (status === google.maps.places.PlacesServiceStatus.OK) {              var marker = new google.maps.Marker({                map: map,                position: place.geometry.location              });

Answer 1

我收到一个javascript错误，其中发布的代码：在此行：上，因为那在加载API之前执行。将其设置为全局 （），然后在 中对其进行初始化。Uncaught ReferenceError: google is not definedvar infowindow = new google.maps.InfoWindow();initMapvar infowindow;initMap

var infowindow;

function initMap() {

  infowindow = new google.maps.InfoWindow();

然后打开 中的详细信息，在单击标记时调用请求，在响应返回时打开 ，跟踪对 from click 事件的引用（该行，它为您提供函数闭包，以便在响应返回到请求时可用）：infowindowgetDetailsinfowindowmarkervar that=this;thatgetDetails

google.maps.event.addListener(marker, 'click', function(e) {

  //display place details in info window

  var request = {

    placeId: this.place_id,

    fields: ['name', 'formatted_address', 'place_id', 'geometry']

  };

  var service = new google.maps.places.PlacesService(map);

  var that = this;

  service.getDetails(request, function(place, status) {

    if (status === google.maps.places.PlacesServiceStatus.OK) {

      var marker = new google.maps.Marker({

        map: map,

        position: place.geometry.location

      });

      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +

        'Place ID: ' + place.place_id + '<br>' +

        place.formatted_address + '</div>');

      infowindow.open(map, that);

    }

  });

});

var map;

var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';

var labelIndex = 0;

var infowindow;

function initMap() {

  // Create the map.

  var duesseldorf = {

    lat: 51.2277,

    lng: 6.7735

  };

  map = new google.maps.Map(document.getElementById('map'), {

    center: duesseldorf,

    zoom: 12

  });

  infowindow = new google.maps.InfoWindow();

  // Create the places service.

  var service = new google.maps.places.PlacesService(map);

  var getNextPage = null;

  var moreButton = document.getElementById('more');

  moreButton.onclick = function() {

    moreButton.disabled = true;

    if (getNextPage) getNextPage();

  };

  // Perform a nearby search.

  service.nearbySearch({

      location: duesseldorf,

      radius: 14000,

      keyword: ['filmproduktion']

    },

    function(results, status, pagination) {

      if (status !== 'OK') return;

      createMarkers(results);

      moreButton.disabled = !pagination.hasNextPage;

      getNextPage = pagination.hasNextPage && function() {

        pagination.nextPage();

      };

    });

}

function createMarkers(places) {

  var bounds = new google.maps.LatLngBounds();

  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {

    var image = {

      url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',

      size: new google.maps.Size(71, 71),

      origin: new google.maps.Point(0, 0),

      anchor: new google.maps.Point(17, 34),

      scaledSize: new google.maps.Size(25, 25)

    };

    var marker = new google.maps.Marker({

      label: labels[labelIndex++ % labels.length],

      map: map,

      place_id: place.place_id,

      title: place.name,

      position: place.geometry.location

    });

    google.maps.event.addListener(marker, 'click', function(e) {

      //display place details in info window

      var request = {

        placeId: this.place_id,

        fields: ['name', 'formatted_address', 'place_id', 'geometry']

      };

      var service = new google.maps.places.PlacesService(map);

      var that = this;

      service.getDetails(request, function(place, status) {

        if (status === google.maps.places.PlacesServiceStatus.OK) {

          var marker = new google.maps.Marker({

            map: map,

            position: place.geometry.location

          });

          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +

            'Place ID: ' + place.place_id + '<br>' +

            place.formatted_address + '</div>');

          infowindow.open(map, that);

        }

      });

    });

    var li = document.createElement('li');

    li.textContent = place.name;

    placesList.appendChild(li);

    bounds.extend(place.geometry.location);

  }

  map.fitBounds(bounds);

}

google.maps.event.addDomListener(window, 'load', initialize);

/* Always set the map height explicitly to define the size of the div

       * element that contains the map. */

#map {

  height: 620px;

  width: 75%;

  margin-left: 3%;

  display: inline-block;

  vertical-align: top;

}

/* Optional: Makes the sample page fill the window. */

html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

h1 {

  text-align: center;

  margin-top: 60px;

  margin-bottom: 60px;

  font-family: 'Roboto', 'sans-serif';

  font-size: 40px;

}

#right-panel {

  font-family: 'Roboto', 'sans-serif';

  line-height: 30px;

  padding: 10px;

}

#right-panel select,

#right-panel input {

  font-size: 15px;

}

#right-panel select {

  width: 100%;

}

#right-panel i {

  font-size: 12px;

}

#right-panel {

  font-family: Arial, Helvetica, sans-serif;

  position: absolute;

  right: 3%;

  height: 600px;

  width: 300px;

  z-index: 5;

  border: 1px solid #999;

  background: #fff;

  display: inline-block;

  vertical-align: top;

}

h2 {

  font-size: 22px;

  margin: 0 0 5px 0;

}

ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

  height: 500px;

  width: 300px;

  overflow-y: scroll;

}

li {

  background-color: #f1f1f1;

  padding: 10px;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

}

li:nth-child(odd) {

  background-color: #fcfcfc;

}

#more {

  width: 100%;

  margin: 5px 0 0 0;

}

/* Media Queries */

@media(max-width: 768px) {

  #map {

    display: block;

    width: 90%;

    margin: auto;

    height: 300px;

  }

  #right-panel {

    display: block;

    margin: auto;

    position: relative;

    right: 0;

    margin-top: 15px;

    height: 400px;

  }

  ul {

    height: 300px;

  }

  h1 {

    font-size: 30px;

    margin-top: 40px;

    margin-bottom: 40px;

  }

}

<!DOCTYPE html>

<html>

<head>

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

  <meta charset="utf-8">

  <link rel="stylesheet" href="./css/style.css">

  <title>Place Search Pagination</title>

  <script src="map.js"></script>

</head>

<header>

  <h1>Die besten Filmproduktionen in Düsseldorf und Umgebung!</h1>

</header>

<body>

  <div id="map"></div>

  <div id="right-panel">

    <h2>Filmproduktionen in Düsseldorf</h2>

    <ul id="places"></ul>

    <button id="more">Mehr Ergebnisse</button>

  </div>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>

</body>

</html>