在网络中获取响应，但控制台返回错误且跨源

Question

我正在将google map api用于网络...也直接从jquery调用Search附近的api来搜索地点，这是控制台错误 这是网络中的回应

我已经在Google api控制台的所有引荐来源网址中添加了使用api的权限。

     var param = {
        key: "My_Key",
        location: pos.lat+','+pos.lng,
        radius: 3000,
        type: "church"
    };
    $.ajax({
        url: "https://maps.googleapis.com/maps/api/place/nearbysearch/json?" + jQuery.param(param),
        method: "GET",
        async: false,
        success: function(resp) {
            console.log(resp);
        },
        error: function(error) {
            console.log(error);
        }
    });

Answer 1

尝试在$.ajax调用中添加dataType : 'jsonp' ，

 $.ajax({
        url: "https://maps.googleapis.com/maps/api/place/nearbysearch/json?" + jQuery.param(param),
        method: "GET",
        dataType : 'jsonp',
        async: false,
        success: function(resp) {
            console.log(resp);
        },
        error: function(error) {
            console.log(error);
        }
    });

希望这可以帮助！

Answer 2

不要在客户端上使用javascript上的Places API网络服务 ，而要使用Google Maps Javascript API v3地方信息库 。

文档中的示例

概念证明小提琴（使用发布的请求参数）

代码段：

 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: '3000', type: ['church'] }; 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 placeLoc = place.geometry.location; 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); }); } google.maps.event.addDomListener(window, "load", initialize); 

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

 <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <div id="map"></div>