5

Google のデモには、このスニペットがあり、ページネーションによって、場所検索から 20 以上の結果を取得できます。

    service.nearbySearch(request, resultList, function(status, results, pagination) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
     return;
    }
    resultList.addPlaces(results);
    if (pagination.hasNextPage) {
      resultList.button.onClick = pagination.nextPage;
    }
  });

このスニペットを次の例、Github の別の Google マップの例、gmaps-samples-v3 に統合しようとすると問題が発生します。

 <!DOCTYPE html>
<html>
  <head>
    <title>Places Search Demo</title>
    <link rel="stylesheet" type="text/css"
          href="https://google-developers.appspot.com/css/screen.css">
    <link rel="stylesheet"
          href="https://www.google.com/cse/style/look/default.css" type="text/css">
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
    </script>
    <script type="text/javascript">
      var map;
      var places;
      var iw;
      var markers = [];

      function initialize() {
        var options = {
          zoom: 12,
          center: new google.maps.LatLng(22.279387,114.164579),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          streetViewControl: false
        };
        var mapCanvas = document.getElementById('map_canvas');
        map = new google.maps.Map(mapCanvas, options);
        places = new google.maps.places.PlacesService(map);
      }

      function updateKeyword(event) {
        updateRankByCheckbox();
        blockEvent(event);
      }

      function blockEvent(event) {
        if (event.which == 13) {
          event.cancelBubble = true;
          event.returnValue = false;
        }
      }

      function updateRankByCheckbox() {
        var types = getTypes();
        var keyword = document.controls.keyword.value;
        var disabled = !types.length && !keyword;
        var label = document.getElementById('rankbylabel');
        label.style.color = disabled ? '#cccccc' : '#333';
        document.controls.rankbydistance.disabled = disabled;
      }

      function getTypes() {
        var types = []
        for (var i = 0; i < document.controls.type.length; i++) {
          if (document.controls.type[i].checked) {
            types.push(document.controls.type[i].value);
          }
        }
        return types;
      }

      function search(event) {
        if (event) {
          event.cancelBubble = true;
          event.returnValue = false;
        }

        var search = {};

        // Set desired types.
        var types = getTypes();
        if (types.length) {
          search.types = types;
        }

        // Set keyword.
        var keyword = document.controls.keyword.value;
        if (keyword) {
          search.keyword = keyword;
        }

        // Set ranking.
        if (!document.controls.rankbydistance.disabled &&
            document.controls.rankbydistance.checked) {
          search.rankBy = google.maps.places.RankBy.DISTANCE;
          search.location = map.getCenter();
        } else {
          search.rankBy = google.maps.places.RankBy.PROMINENCE;
          search.bounds = map.getBounds()
        }

        // Search.
        places.search(search, function(results, status) {
          if (status == google.maps.places.PlacesServiceStatus.OK) {
            clearResults();
            clearMarkers();
            for (var i = 0; i < results.length; i++) {
              var letter = String.fromCharCode(65 + i);
              markers[i] = new google.maps.Marker({
                position: results[i].geometry.location,
                animation: google.maps.Animation.DROP,
                icon: 'http://maps.gstatic.com/intl/en_us/mapfiles/marker' +
                    letter + '.png'
              });
              google.maps.event.addListener(
                  markers[i], 'click', getDetails(results[i], i));
              dropMarker(markers[i], i * 100);
              addResult(results[i], i);
            }
          }
        });
      }

      function clearMarkers() {
        for (var i = 0; i < markers.length; i++) {
          if (markers[i]) {
            markers[i].setMap(null);
            delete markers[i]

          }
        }
      }

      function dropMarker(marker, delay) {
        window.setTimeout(function() {
          marker.setMap(map);
        }, delay);
      }

      function addResult(result, i) {
        var results = document.getElementById('results');
        var tr = document.createElement('tr');
        tr.style.backgroundColor = i % 2 == 0 ? '#F0F0F0' : '#FFFFFF';
        tr.onclick = function() {
          google.maps.event.trigger(markers[i], 'click');
        };

        var iconTd = document.createElement('td');
        var nameTd = document.createElement('td');
        var icon = document.createElement('img');
        icon.src = result.icon;
        icon.className = 'placeIcon';
        var name = document.createTextNode(result.name);
        iconTd.appendChild(icon);
        nameTd.appendChild(name);
        tr.appendChild(iconTd);
        tr.appendChild(nameTd);
        results.appendChild(tr);
      }

      function clearResults() {
        var results = document.getElementById('results');
        while (results.childNodes[0]) {
          results.removeChild(results.childNodes[0]);
        }
      }

      function getDetails(result, i) {
        return function() {
          places.getDetails({
            reference: result.reference
          }, showInfoWindow(i));
        }
      }

      function showInfoWindow(i) {
        return function(place, status) {
          if (iw) {
            iw.close();
            iw = null;
          }

          if (status == google.maps.places.PlacesServiceStatus.OK) {
            iw = new google.maps.InfoWindow({
              content: getIWContent(place)
            });
            iw.open(map, markers[i]);
          }
        }
      }

      function getIWContent(place) {
        var content = '<table style="border:0"><tr><td style="border:0;">';
        content += '<img class="placeIcon" src="' + place.icon + '"></td>';
        content += '<td style="border:0;"><b><a href="' + place.url + '">';
        content += place.name + '</a></b>';
        content += '</td></tr></table>';
        return content;
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    <style type="text/css">
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: arial;
        font-size: 13px;
        overflow: hidden;
      }

      #container {
        margin-top: 6px;
        margin-left: 6px
      }

      #map_canvas {
        float: left;
        width: 320px;
        height: 406px;
        margin-top: 13px; 
      }

      #listing {
        float: left;
        margin-left: 1px;
        margin-top: 13px;
        width: 200px;
        height: 406px;
        overflow: auto;
        cursor: pointer;
      }

      #controls {
        padding: 5px;
      }
      .placeIcon {
        width: 16px;
        height: 16px;
        margin: 2px;
      }

      #results {
        border-collapse: collapse;
        width: 184px;
      }
    </style>
  </head>

  <body class="docs framebox_body">
    <div id="container">
      <div>
        <form name="controls">
          <div style="margin-top: 5px">
            Keyword:
          </div>
          <div style="margin-left: 9px">
            <input id="keyword" type="text" onkeyup="updateKeyword(event)"
                   onkeydown="blockEvent(event)" style="width:110px">
          </div>
          <div style="margin-top: 5px">
            Types:
          </div>
          <div style="margin-left: 9px">
            <input type="checkbox" name="type" value="store"
                   onclick="updateRankByCheckbox()" /> store<br/>
            <input type="checkbox" name="type" value="clothing_store"
                   onclick="updateRankByCheckbox()" /> clothing_store<br/>
            <input type="checkbox" name="type" value="restaurant"
                   onclick="updateRankByCheckbox()" /> restaurant<br>
            <input type="checkbox" name="type" value="lodging"
                   onclick="updateRankByCheckbox()" /> lodging<br>
            <input type="checkbox" name="type" value="subway_station"
                   onclick="updateRankByCheckbox()" />MTR Station<br>
          </div>
          <div id="rankbylabel" style="margin-top: 5px; color: #cccccc">
            <input type="checkbox" disabled="true"
                   name="rankbydistance" /> Rank by distance
          </div>
          <div style="margin-top: 5px">
            <input type="submit" value="Search" onclick="search(event)" />
          </div>
        </form>
      </div>
    <div id="map_canvas"></div>
    <div id="listing">
      <table id="results"></table>
    </div>
  </body>
</html>

誰でも助けてもらえますか？問題に関するいくつかの光（ポインター）で十分です。

4

2 に答える 2

6

これが私がやった方法です。私はこのことの第一人者ではありませんが、これが私のコードです。

まず、検索呼び出しを function() から独自の関数に戻す必要がある場合があります。

私は次のようなものを持っています

placesServiceClass.search(request, placesCallback);

レストゥル処理のコールバックで、次のようにします...

function placesCallback(results, status, pagination) {

// process the resutls  
if (status == google.maps.places.PlacesServiceStatus.OK) {      
    for (var int = 0; int < results.length; int++) {    
        placesManager.addMarker(results[int], int);
    }

 } 

if (pagination.hasNextPage) {
    sleep:2;
    pagination.nextPage();
}

Google のドキュメントには、次のページ呼び出しの間に 2 秒間待機する必要があるため、スリープ状態になると記載されています。

pagination.nextPage() は同じコールバックを呼び出します。私の場合、placesCallback() です。

それが役立つことを願っています

于 2012-08-02T02:28:59.743 に答える