使用 google api 在城市中顯示類別地點

Question

輸入：用戶將選擇城市和地點類別。

輸出：谷歌地圖，其中包含該城市中具有相同類別的所有地方。

我如何使用谷歌地圖 API 做到這一點。

當我嘗試使用地點 API 時，它返回帶有地理數據的 json，但我不能將它與 JavaScript 或 jQuery Json 請求一起使用。

$.getJSON( "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=1500&type=restaurant&keyword=cruise&key=YOUR_API_KEY", function( json ) {
  console.log( "JSON Data: " + json );
 });

但是瀏覽器日志不顯示任何輸出。

實現我的想法的最佳方式的任何示例代碼？？！

謝謝

Answer 1

您可能正在尋找客戶端 Places Library 的Nearby Search 服務。 看看這個有效的jsfiddle 。

JS代碼如下：

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 15
  });

  var request = {
    location: pyrmont,
    radius: '500',
    type: ['restaurant']
  };

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

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

function createMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

希望這可以幫助！

Answer 2

使用此代碼，您只需提供城市名稱和地點類型，或者您可以在此處找到： https : //developers.google.com/places/web-service/supported_types

輸出將顯示同一個城市中的 20 個地點，類型為您通過的。

     <script>
      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:

      var map;
      var service;
      var infowindow;
      var city;

      function initMap() {
        var cityName = document.getElementById('cityInput').value;  // text input html tag 
        var type = document.getElementById('subCategory').value;    // select input html tag 

        map = new google.maps.Map(document.getElementById('map'), {zoom: 14});
        var cityRequest = {
          query: cityName,
          fields: ['name', 'geometry'],
        };

        //alert("find!! : " + cityName);

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

        service.findPlaceFromQuery(cityRequest, function(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            let city = results[0].geometry.location;
            map.setCenter(city);

            infowindow = new google.maps.InfoWindow();
            //alert(type);


        var request = {
            location: city,
            radius: '1000', 
            query: type
        };
//radius is size of search area


        service.textSearch(request, function(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) { // adding places to map
              createMarker(results[i]);
            }

            //map.setCenter(results[0].geometry.location);
          }
        });
          }
        });



      }

      function createMarker(place) {
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }
    </script>

使用此代碼，您將在網頁中顯示地圖

                <div id="map" style="height: 500px; "></div>

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