Question

我试图对地址进行地理编码，在本例中为Google HQ，然后使用places API在该地址附近找到机制。

当我在我的网站上放置相同的代码时，地图呈现碎片（参见：https://stackoverflow.com/questions/26152702/map-created-with-google-maps-api-places-api-and-geocode-showing-map-with-ver?noredirect=1#comment41018580_26152702）

但是，在js小提琴（http://jsfiddle.net/ze1cpmt5/）中，它根本不会渲染。与仅包含我的域上托管的地图的页面相同。

实际上代码并不完全相同，在JS Fiddle中，它缺少我的密钥，因为使用密钥，API会返回一条警告，说明API已被阻止。此警报仅在JSFiddle中的密钥中发生。不在我的域名上的密钥。

这是我的代码：

$.ajax({
    url: 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA',
     dataType: 'json',
     jsonp: 'callback',
     method: 'GET',
     success: function(results){
        console.log(results);
        queryLat = results['results'][0]['geometry']['location']['lat'];
        queryLong = results['results'][0]['geometry']['location']['lng'];
        function callback(mapsResults, status){
            if(status == google.maps.places.PlacesServiceStatus.OK){
                    for(var i=0; i<mapsResults.length; i++){
                            var place = mapsResults[i];
                            createMarker(mapsResults[i]);
                    }
            }
        }
        var map;
        var service;
        map = new google.maps.Map(document.querySelector('body'), {
            center:new google.maps.LatLng(queryLat, queryLong),
            zoom:15
        });
        var request = {
            location: new google.maps.LatLng(queryLat, queryLong),
            radius:'500',
            query:'mechanic'
        };
        service = new google.maps.places.PlacesService(map);
        service.textSearch(request, callback);
    }
});

如果有人可以帮我弄清楚为什么它不会在js小提琴上渲染以及我的域名中的独立页面，或者为什么它会在我的全站点中分段显示，我将不胜感激。

Answer 1

document.querySelector（＆＃39; body＆＃39;）没有返回div。

改为使用div：

<div class="map" style="height:400px; width:400px;"></div>

然后：

map = new google.maps.Map(document.querySelector('.map'), {
     center: new google.maps.LatLng(queryLat, queryLong),
     zoom: 15
});

working fiddle

谷歌地图渲染空白地图

1 个答案: