Question

我需要围绕经度和纬度定义的位置的重要场所（如医院，学校，商店等）。我在PHP中成功实现了如下：

$lat = "27.71158601970849";
$lon = "85.3187467697085";
$type = "hospital";
$json = json_decode(file_get_contents("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=$lat,$lon&radius=1000&type=$type&key=AIzaSyBeeGuG4sYloXT54VJZ5JeADQ8DmG9toBc") , true );

使用$json变量中的信息，我可以显示附近的地点。

我注意到当我需要在循环中为每种属性类型（医院，学校......）运行相同的代码时，我的 page load time increased to 7 seconds. 这显然不是访问者所希望的。

所以让用户体验更好我认为使用ajax调用会更好。所以我尝试了这段代码：

$(document).ready(function(){
    if(typeof latitude !== typeof undefined){
        var lat = latitude;
        var lon = longitude;
        var type = "hospital";
        $.ajax({
            type:"GET",
            url:"https://maps.googleapis.com/maps/api/place/nearbysearch/json?location="+lat+","+lon+"&radius=1000&type="+type+"&key=AIzaSyBeeGuG4sYloXT54VJZ5JeADQ8DmG9toBc&callback?",
            dataType:"json",
            crossDomain: true,
            contentType: "application/json; charset=utf-8;",
            // async: true,
            success: function(results){
                console.log(results);
            },
             error: function (xhr, textStatus, errorThrown) {
                 console.log('Error in Operation');
                 console.log(xhr);
                 console.log(textStatus);
                 console.log(errorThrown);
             },
            jsonpCallback: function(result)
            { 
                console.log(result); 
            }
        });
        // console.log(latitude , longitude);
    }
});

我已经陷入这个问题3天了。互联网没有解决方案。我在控制台中得到以下输出。

Warning:

阻止跨源请求：同源策略禁止读取远程资源在 https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=27.717807854017007,85.32777655029304&radius=1000&type=hospital&key=AIzaSyBeeGuG4sYloXT54VJZ5JeADQ8DmG9toBc&callback？（原因：缺少CORS标题'Access-Control-Allow-Origin'。

许多解决方案建议将服务器端标题更改为 Access-Control-Allow-Origin * 。但是，如何更改Google API的服务器端代码？为什么在同一站点的PHP中没有错误地解码相同的响应？

Error in Operation
parsererror
SyntaxError: unexpected token: ':'[Learn More]

我在控制台中收到 JSON文件，我不知道它在哪里显示，但它是我需要的json ，但是那里有错误文件。要自己查看问题，请访问 my site。

json文件如下：

{
   "html_attributions" : [],
   "next_page_token" : "CvQD5QEAAKjJw1utsQJW5CkIGPIFiu-3qtZEZs_MTNBiGLQnTWR3Z_8GTrtQ06cq_2x9TFtRunS-ZTswJQegZmB2A4d42ML0NBqkHqrZkQy4doNCeRY2f3A_7RKPzSHqIMhrfHr75LhVhAylbiwb9ee_og9pm7mRnLAXRC3FkyTCnRH8gz_Ef3Zfr39NOyVwYDUP5uDy_YW425Um_WA4KSuasuc8sxQlb5QlWW9Ol9Zd6MtEanWcPGoCeabJQRuwQjMqM78eokRYfo_pyVsd_duVn7r0Np4WXvETSpwjLQwSW7E34O9o3xAB7_Kjx9qkQRGiLrYpuzqCLZaUaliQ1K00sScWmNbsnTOyrmQf1pqzkQkCwsEILherFOJLVCxyEXGN9Pa1C9gZfJhR7KOVcDW__BIo7n0mcps1JO4GEMgNpbULpQMRGSGdT3-2vtOITQJYzvPtnpYewvyEJtLvJOTX3_f-VqYG1OAbArH6riGJ1kYXTQN4ZX6w2LbiEWDRKCEr50RuHnRstvbfv-O74yfJUhrnYsI14b2XtFSQGADPIJqBCcqUHUSx5li2BF8f5da3IcmZVjKHGn-2dozfVYE190aIDYYYcwqGNWJIjE20fnwaR6302mFzJ8ssHL2liDzcpAxcrWjfVdM86riwWBhEPmIyKUMSENYZmjWNGgkpGJbRElNeyoAaFJ2QH902uDsBeXzEGM9tBSe9OWVZ",
   "results" : [
      {
         "geometry" : {
            "location" : {
               "lat" : 27.718038,
               "lng" : 85.32124039999999
            },
            "viewport" : {
               "northeast" : {
                  "lat" : 27.7193869802915,
                  "lng" : 85.3225893802915
               },
               "southwest" : {
                  "lat" : 27.71668901970849,
                  "lng" : 85.31989141970848
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/doctor-71.png",
         "id" : "38f6d1f517223601b130cc35bdf6bfb95b205ef5",
         "name" : "Dental Imaging Centre",
         "opening_hours" : {
            "open_now" : true,
            "weekday_text" : []
         },
         "photos" : [
            {
               "height" : 3480,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/116325705698031818585/photos\"\u003eSangam Dhakal\u003c/a\u003e"
               ],
               "photo_reference" : "CmRaAAAA6u3e7yL6fwG77PVsWJN07knD6jmQMa2dRL7vmtToFh9x6KaViDf2WHhYtiYPacZTlzCAB2npe8z45hR18UbQfrTRCLXt2wAPHGYLNRqGD7zwfuPRETZ0nh5nIlr72VAlEhDItbx5uxo24kxLQ0_CT29ZGhTvzKiIkyyyRSfF8bjlKVsz_Csjjw",
               "width" : 4640
            }
         ],
         "place_id" : "ChIJheuuJxsZ6zkRlgeZX3mXoMI",
         "rating" : 4,
         "reference" : "CmRSAAAATXt4gZlyejOUAKP4DL2ECCIGIC7cCxxiQv03oA7IdSKZ1OpP1HPyoTG37IuJ3xZyavW3G4H5eEiavjJKwIAss8yM6xIeDla_FdDnrM6NhbOzJ5FaH0uufIcAHGtxBkBsEhB4RdTC6Zvx9nnHecH7s4snGhQpfzxe5vDMtigmAoPQ_cDN-xZO1g",
         "scope" : "GOOGLE",
         "types" : [ "hospital", "point_of_interest", "establishment" ],
         "vicinity" : "Kathmandu"
      }
...
...

The official documentation of Google

Answer 1

我最终从 google map javascript API 文档中找到了解决方案，该文档完美无缺，只是不要忘记绑定一个事件来运行此代码来记录它之后的文档完全加载。

  function initMap() {
    console.log('latit',latitude);
    var myLatLng = {lat: latitude, lng: longitude};
    var map1 = new google.maps.Map(document.getElementById('map_detail'), {
      zoom: 15,
      center: myLatLng
    });

    var marker1 = new google.maps.Marker({
      position: myLatLng,
      map: map1,
    });
    service = new google.maps.places.PlacesService(map1);
    Object.keys(nearbyLandmarksArr).forEach(function(key) {
      var request = {
        location: myLatLng,
        radius: '1000',
        query: key
      };  
      service.textSearch(request, callback);
      // console.log(key, obj[key]);
    });
  }

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

以下行在加载后将代码与DOM绑定在上面。

google.maps.event.addDomListener(window, 'load', initMap);

在Javascript异步

1 个答案: