Question

所以我想创建一个简单的应用程序，允许用户搜索餐馆，并将结果显示为地图上的标记和下面的文本。从textSearch返回的结果对象不提供详细信息，如：电话号码，图片等。所以我决定创建一个从结果对象推送的地方ID数组，获取每个id的地方详细信息，然后推送成阵列。我得到的问题是来自谷歌的消息说我超过了我的配额，我认为这是因为我要求每个搜索结果的地点详细信息。

我有没有办法只为我点击的标记请求地点详细信息？或者我的问题有更好的解决方案吗？提前感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
  <title>gMap test</title>

 <style type="text/css">
    #map-canvas{
      height:500px;
    }
  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
  <script type="text/javascript">



function performSearch(){

  var locationBox;
  var address = document.getElementById("address").value;
  var searchRadius = metricConversion(document.getElementById("radius").value); 
  //gMaps method to find coordinates based on address
  geocoder.geocode({'address':address}, function(results,status){

      if(status == google.maps.GeocoderStatus.OK){
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map:map,
          position: results[0].geometry.location
        });      
        var latitude =  results[0].geometry.location.A;
        var longitude =  results[0].geometry.location.F;
        locationBox = new google.maps.LatLng(latitude, longitude); 

      }else{
        errorStatus(status);
        return;
      }


      //search request object
      var request = {
        query: document.getElementById('keyword').value,  
        location: locationBox,
        radius: searchRadius, 
        //minPriceLvl: minimumPrice,
        //maxPriceLvl: maximumPrice,
        types: ["restaurant"]
      }    

      //search method. sending request object and callback function
      service.textSearch(request, handleSearchResults);          
  });   
};

  var latLngArray = [];
  var placeIdArray = [];

  //callback function
  function handleSearchResults(results,status){

    if( status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {          
          placeIdArray.push(results[i].place_id)
          latLngArray.push(results[i].geometry.location);  
      };
      for(var j = 0; j<placeIdArray.length; j++){
        service.getDetails({placeId: placeIdArray[j]},getDetails)
      };  
    }
    else{errorStatus(status)};         
  };
  var detailedArray = [];

  function getDetails(results,status){
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      detailedArray.push(results);
      for(var i = 0; i<detailedArray.length; i++){
      createMarker(detailedArray[i],i);
      }
    }
    else{
      errorStatus(status)
    };   
  }


  //array of all marker objects
  var allMarkers = [];
  //creates markers and info windows for search results
  function createMarker(place, i) {
    var image = 'images/number_icons/number_'+(i+1)+'.png';
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location,
      html: 
        "<div class = 'markerPop'>" + "<h3>" + (i+1) + ". " + place.name + "</h3><br>" + "<p>Address: "
        + place.formatted_address + "</p><br>" + "<p> Price Range: "+ priceLevel(place.price_level)
        + "</p>" + "</div>",
      icon: image

    });

    allMarkers.push(marker);
    marker.infowindow = new google.maps.InfoWindow();

    //on marker click event do function
    google.maps.event.addListener(marker, 'click', function() {
      //service.getDetails({placeId: placeIdArray[j]},getDetails)
      //sets infowindow content and opens infowindow
      infowindow.setContent(this.html);
      infowindow.open(map,this);

    });

    //create new bounds object
    var bounds = new google.maps.LatLngBounds();
    //iterates through all coordinates to extend bounds
    for(var i = 0;i<latLngArray.length;i++){
      bounds.extend(latLngArray[i]);
    };
    //recenters map around bounds
    map.fitBounds(bounds);

  };

  var map;
  var service;
  var geocoder;
  var infowindow;

  function initialize(location){

    var mapOptions = {
      center: new google.maps.LatLng(37.804, -122.271),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    };

    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
    service = new google.maps.places.PlacesService(map)
    infowindow = new google.maps.InfoWindow();
  };

  $(document).ready(function(){
    initialize();

    $('#search').on('click', function(){
      removeMarkers();
      performSearch();

    });     
  });


  //::::::Random Functions:::::::

  //Clears all markers between searches
  function removeMarkers(){
    for(var i = 0; i<allMarkers.length;i++){
      allMarkers[i].setMap(null);
    };
  };

  //converts miles to meters for search object
  function metricConversion(miles){
    var meters;
    meters = miles * 1609.34;
    return meters;
  }

  //converts number value to $ sign
  function priceLevel(number){
    var moneySigns = ""
    for(var i =0;i<=number;i++){
      moneySigns += "$";
    };
    return moneySigns;
  }


  //errors for search results
  function errorStatus(status){
    switch(status){
      case "ERROR": alert("There was a problem contacting Google Servers");
        break;
      case "INVALID_REQUEST": alert("This request was not valid");
        break;
      case "OVER_QUERY_LIMIT": alert("This webpage has gone over its request quota");
        break;
      case "NOT_FOUND": alert("This location could not be found in the database");
        break;
      case "REQUEST_DENIED": alert("The webpage is not allowed to use the PlacesService");
        break;
      case "UNKNOWN_ERROR": alert("The request could not be processed due to a server error. The request may succeed if you try again");
        break;
      case "ZERO_RESULTS": alert("No result was found for this request. Please try again");
        break;
      default: alert("There was an issue with your request. Please try again.")
    };
  };

    </script>
</head>

<body>


  <div id="map-canvas"></div>
  <div id="searchBar">
  <h3>search options</h3>
  Location:<input type="text" id="address" value="enter address here" /><br>
  Keyword<input type="text" id="keyword" value="name or keyword" /><br>
  Advanced Filters:<br>
  Search Radius:<select id="radius">
    <option>5</option>
    <option>10 </option>
    <option>15 </option>
    <option>20 </option>
    <option>25 </option>
  </select>miles<br>
  <div id="minMaxPrice">
    Min Price<select id="minPrice">
      <option>$</option>
      <option>$$</option>
      <option>$$$</option>
      <option>$$$$</option>
    </select>
    Max Price<select id="maxPrice">
      <option>$</option>
      <option>$$</option>
      <option>$$$</option>
      <option>$$$$</option>
    </select>
  </div>
  <input type="button" id="search" value="Submit Search"/><br>
  </div>
  <div id='searchResults'>

  </div>

</body>
</html>

Answer 1

我前段时间遇到过同样的问题。谷歌的地理编码功能是为了避免用户在大量数据上执行它（然后，避免你轻易获得大量的地理编码地址）。

我的解决方案是在用户选择特定地点时执行地理编码功能，然后显示此特定数据（通过点击引脚处理）。

我认为使用代码的工作版本启动jsfiddle是非常有用的。

基本上就你的功能而言：

google.maps.event.addListener(marker, 'click', function() {
  //Execute geocoding function here on marker object
  //Complete your html template content
  infowindow.setContent(this.html);
  infowindow.open(map,this);

});

Answer 2

文档中的radarSearch example会在点击时请求标记的详细信息。

代码段：

＆＃13;

var map;
var infoWindow;
var service;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-33.8668283734, 151.2064891821),
    zoom: 15,
    styles: [{
      stylers: [{
        visibility: 'simplified'
      }]
    }, {
      elementType: 'labels',
      stylers: [{
        visibility: 'off'
      }]
    }]
  });

  infoWindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);

  google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
}

function performSearch() {
  var request = {
    bounds: map.getBounds(),
    keyword: 'best view'
  };
  service.radarSearch(request, callback);
}

function callback(results, status) {
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    createMarker(result);
  }
}

function createMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: {
      // Star
      path: 'M 0,-24 6,-7 24,-7 10,4 15,21 0,11 -15,21 -10,4 -24,-7 -6,-7 z',
      fillColor: '#ffff00',
      fillOpacity: 1,
      scale: 1 / 4,
      strokeColor: '#bd8d2c',
      strokeWeight: 1
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status != google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }
      var htmlStr = "<b>"+result.name+"</b><br>";
      if (result.website) htmlStr += "<a href='"+result.website+"'>"+result.website+"</a><br>";
      if (result.adr_address) htmlStr += result.adr_address+"<br>";
      infoWindow.setContent(htmlStr);
      infoWindow.open(map, marker);
    });
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<div id="map-canvas"></div>

＆＃13;

在Google Maps Api上超过配额

2 个答案: