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

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;initMapvar infowindow;function initMap() {&nbsp; infowindow = new google.maps.InfoWindow();然后打开 中的详细信息，在单击标记时调用请求，在响应返回时打开 ，跟踪对 from click 事件的引用（该行，它为您提供函数闭包，以便在响应返回到请求时可用）：infowindowgetDetailsinfowindowmarkervar that=this;thatgetDetailsgoogle.maps.event.addListener(marker, 'click', function(e) {&nbsp; //display place details in info window&nbsp; var request = {&nbsp; &nbsp; placeId: this.place_id,&nbsp; &nbsp; fields: ['name', 'formatted_address', 'place_id', 'geometry']&nbsp; };&nbsp; var service = new google.maps.places.PlacesService(map);&nbsp; var that = this;&nbsp; service.getDetails(request, function(place, status) {&nbsp; &nbsp; if (status === google.maps.places.PlacesServiceStatus.OK) {&nbsp; &nbsp; &nbsp; var marker = new google.maps.Marker({&nbsp; &nbsp; &nbsp; &nbsp; map: map,&nbsp; &nbsp; &nbsp; &nbsp; position: place.geometry.location&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +&nbsp; &nbsp; &nbsp; &nbsp; 'Place ID: ' + place.place_id + '<br>' +&nbsp; &nbsp; &nbsp; &nbsp; place.formatted_address + '</div>');&nbsp; &nbsp; &nbsp; infowindow.open(map, that);&nbsp; &nbsp; }&nbsp; });});var map;var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';var labelIndex = 0;var infowindow;function initMap() {&nbsp; // Create the map.&nbsp; var duesseldorf = {&nbsp; &nbsp; lat: 51.2277,&nbsp; &nbsp; lng: 6.7735&nbsp; };&nbsp; map = new google.maps.Map(document.getElementById('map'), {&nbsp; &nbsp; center: duesseldorf,&nbsp; &nbsp; zoom: 12&nbsp; });&nbsp; infowindow = new google.maps.InfoWindow();&nbsp; // Create the places service.&nbsp; var service = new google.maps.places.PlacesService(map);&nbsp; var getNextPage = null;&nbsp; var moreButton = document.getElementById('more');&nbsp; moreButton.onclick = function() {&nbsp; &nbsp; moreButton.disabled = true;&nbsp; &nbsp; if (getNextPage) getNextPage();&nbsp; };&nbsp; // Perform a nearby search.&nbsp; service.nearbySearch({&nbsp; &nbsp; &nbsp; location: duesseldorf,&nbsp; &nbsp; &nbsp; radius: 14000,&nbsp; &nbsp; &nbsp; keyword: ['filmproduktion']&nbsp; &nbsp; },&nbsp; &nbsp; function(results, status, pagination) {&nbsp; &nbsp; &nbsp; if (status !== 'OK') return;&nbsp; &nbsp; &nbsp; createMarkers(results);&nbsp; &nbsp; &nbsp; moreButton.disabled = !pagination.hasNextPage;&nbsp; &nbsp; &nbsp; getNextPage = pagination.hasNextPage && function() {&nbsp; &nbsp; &nbsp; &nbsp; pagination.nextPage();&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; });}function createMarkers(places) {&nbsp; var bounds = new google.maps.LatLngBounds();&nbsp; var placesList = document.getElementById('places');&nbsp; for (var i = 0, place; place = places[i]; i++) {&nbsp; &nbsp; var image = {&nbsp; &nbsp; &nbsp; url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',&nbsp; &nbsp; &nbsp; size: new google.maps.Size(71, 71),&nbsp; &nbsp; &nbsp; origin: new google.maps.Point(0, 0),&nbsp; &nbsp; &nbsp; anchor: new google.maps.Point(17, 34),&nbsp; &nbsp; &nbsp; scaledSize: new google.maps.Size(25, 25)&nbsp; &nbsp; };&nbsp; &nbsp; var marker = new google.maps.Marker({&nbsp; &nbsp; &nbsp; label: labels[labelIndex++ % labels.length],&nbsp; &nbsp; &nbsp; map: map,&nbsp; &nbsp; &nbsp; place_id: place.place_id,&nbsp; &nbsp; &nbsp; title: place.name,&nbsp; &nbsp; &nbsp; position: place.geometry.location&nbsp; &nbsp; });&nbsp; &nbsp; google.maps.event.addListener(marker, 'click', function(e) {&nbsp; &nbsp; &nbsp; //display place details in info window&nbsp; &nbsp; &nbsp; var request = {&nbsp; &nbsp; &nbsp; &nbsp; placeId: this.place_id,&nbsp; &nbsp; &nbsp; &nbsp; fields: ['name', 'formatted_address', 'place_id', 'geometry']&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; var service = new google.maps.places.PlacesService(map);&nbsp; &nbsp; &nbsp; var that = this;&nbsp; &nbsp; &nbsp; service.getDetails(request, function(place, status) {&nbsp; &nbsp; &nbsp; &nbsp; if (status === google.maps.places.PlacesServiceStatus.OK) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var marker = new google.maps.Marker({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; map: map,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: place.geometry.location&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Place ID: ' + place.place_id + '<br>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; place.formatted_address + '</div>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; infowindow.open(map, that);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; var li = document.createElement('li');&nbsp; &nbsp; li.textContent = place.name;&nbsp; &nbsp; placesList.appendChild(li);&nbsp; &nbsp; bounds.extend(place.geometry.location);&nbsp; }&nbsp; map.fitBounds(bounds);}google.maps.event.addDomListener(window, 'load', initialize);/* Always set the map height explicitly to define the size of the div&nbsp; &nbsp; &nbsp; &nbsp;* element that contains the map. */#map {&nbsp; height: 620px;&nbsp; width: 75%;&nbsp; margin-left: 3%;&nbsp; display: inline-block;&nbsp; vertical-align: top;}/* Optional: Makes the sample page fill the window. */html,body {&nbsp; height: 100%;&nbsp; margin: 0;&nbsp; padding: 0;}h1 {&nbsp; text-align: center;&nbsp; margin-top: 60px;&nbsp; margin-bottom: 60px;&nbsp; font-family: 'Roboto', 'sans-serif';&nbsp; font-size: 40px;}#right-panel {&nbsp; font-family: 'Roboto', 'sans-serif';&nbsp; line-height: 30px;&nbsp; padding: 10px;}#right-panel select,#right-panel input {&nbsp; font-size: 15px;}#right-panel select {&nbsp; width: 100%;}#right-panel i {&nbsp; font-size: 12px;}#right-panel {&nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; position: absolute;&nbsp; right: 3%;&nbsp; height: 600px;&nbsp; width: 300px;&nbsp; z-index: 5;&nbsp; border: 1px solid #999;&nbsp; background: #fff;&nbsp; display: inline-block;&nbsp; vertical-align: top;}h2 {&nbsp; font-size: 22px;&nbsp; margin: 0 0 5px 0;}ul {&nbsp; list-style-type: none;&nbsp; padding: 0;&nbsp; margin: 0;&nbsp; height: 500px;&nbsp; width: 300px;&nbsp; overflow-y: scroll;}li {&nbsp; background-color: #f1f1f1;&nbsp; padding: 10px;&nbsp; text-overflow: ellipsis;&nbsp; white-space: nowrap;&nbsp; overflow: hidden;}li:nth-child(odd) {&nbsp; background-color: #fcfcfc;}#more {&nbsp; width: 100%;&nbsp; margin: 5px 0 0 0;}/* Media Queries */@media(max-width: 768px) {&nbsp; #map {&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 90%;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; height: 300px;&nbsp; }&nbsp; #right-panel {&nbsp; &nbsp; display: block;&nbsp; &nbsp; margin: auto;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; margin-top: 15px;&nbsp; &nbsp; height: 400px;&nbsp; }&nbsp; ul {&nbsp; &nbsp; height: 300px;&nbsp; }&nbsp; h1 {&nbsp; &nbsp; font-size: 30px;&nbsp; &nbsp; margin-top: 40px;&nbsp; &nbsp; margin-bottom: 40px;&nbsp; }}<!DOCTYPE html><html><head>&nbsp; <meta name="viewport" content="initial-scale=1.0, user-scalable=no">&nbsp; <meta charset="utf-8">&nbsp; <link rel="stylesheet" href="./css/style.css">&nbsp; <title>Place Search Pagination</title>&nbsp; <script src="map.js"></script></head><header>&nbsp; <h1>Die besten Filmproduktionen in Düsseldorf und Umgebung!</h1></header><body>&nbsp; <div id="map"></div>&nbsp; <div id="right-panel">&nbsp; &nbsp; <h2>Filmproduktionen in Düsseldorf</h2>&nbsp; &nbsp; <ul id="places"></ul>&nbsp; &nbsp; <button id="more">Mehr Ergebnisse</button>&nbsp; </div>&nbsp; <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script></body></html>