显示 google api 城市中的类别地点

Question

输入：用户将select城市和地点类别。

输出：google 包含该城市中具有相同类别的所有地点的地图。

我如何使用 google 地图 APIs 做到这一点。

当我尝试使用地点 API 时，它是 return json 与地理数据，但我不能将其与 JavaScript 或 jQuery [=33] 一起使用=] 请求。


$.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 service. Take a look at this working 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>

显示 google api 城市中的类别地点

Show places of category in city with google api

javascript

jquery

google-maps

google-maps-api-3