时间戳

首页 > 解决方案 > 使用 google api 显示城市中的类别地点

javascript - 使用 google api 显示城市中的类别地点

问题描述

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

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

我如何使用谷歌地图 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 );
 });

但浏览器日志不显示任何输出。

任何实现我的想法的最佳方式的示例代码？？！

谢谢

标签： javascriptjquerygoogle-mapsgoogle-maps-api-3

解决方案

您可能正在寻找客户端 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);
  });
}

希望这可以帮助！

推荐阅读