Question

我正在使用Google Maps / Places API的网站上工作。我已经验证我的API密钥工作正常，因此不是问题。我甚至无法显示地图 - 这就是我的问题我已经完全复制了这个例子，它仍然无法工作 Here's my code是一个要点，因为它是一些文件。它应该是可运行的，即所有内容。

到目前为止我尝试了什么：
- 将所有内容放在文档就绪函数（jQuery）中 - 将它从getCurrentPosition函数中取出，使其刚好出现在main.js文件中 - 在我的HTML文件中移动脚本链接的位置，在任何位置都没有任何改变 - 如果我是console.log（）lat和long变量，它们会打印我的位置。但他们并没有定义＆＃34;当我将它们输入Chrome Dev Tools控制台时。但是，我的地图＆＃34;变量将地图div打印到控制台 - 使用静态坐标，而不是从导航器HTML5元素收集的坐标 - 使用像素，百分比和vh / vw设置地图div的高度和宽度。它正在拍摄屏幕 - 我知道因为我给了它一个正在显示的背景颜色 - 在我的API加载结束时添加了参数：&callback=initialize&libraries=places

这是我第一次使用地图，所以我完全迷失在这里。我跟着Google's example走了一个发球台，但仍然没有。

WebStorm强调了所有google.maps.x类，并说明了他们未解决的变量或类型＆＃34;。这可能是我的问题，但我不知道是什么原因或如何解决它。为了清楚起见，我查看了与Stack Overflow相关的每篇文章，并且找不到解决方案。

更新：
- 我刚刚尝试从Google 完全复制并粘贴this example（当然是使用我的API密钥），但它仍然无法正常工作。我把它放在我的HTML脚本标签中。唯一可行的方法是，如果我删除initMap()函数 - 而不是它的内容，只是将它声明为函数。那么为什么范围在这里表现得如此奇怪？它处理函数内部的所有内容（在我的HTML中的脚本标记中），好像它只是因为它在一个函数中...在最高范围级别而未被定义。

Answer 1

您正在尝试在加载Google Maps SDK之前运行main.js。将其移至main.js' in index.html`上方：

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

然后，删除initialize功能：

if ("geolocation" in navigator) {
console.log("Geolocation is enabled.");
navigator.geolocation.getCurrentPosition(function (position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    var map;
    var service;
    var infoWindow;

    console.log("lat: " + lat);

    //Initialize Google Map. Starts at user's location.

        var userLocation = new google.maps.LatLng(lat, long);

        map = new google.maps.Map(document.getElementById('map'), {
            center: userLocation,
            zoom: 15
        });

        var request = {
            location: userLocation,
            radius: '500',
            types: ['store']
        };

        service = new google.maps.places.PlaceService(map);
        service.nearbySearch(request, callback);


    //Callback function for nearbySearch
    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]);
            }
        }
    }
});
} else {
console.log("Geolocation is disabled.");
//Inform user why we use location
//Allow user to enter location manually
}

这适合我。

谷歌地图JS没有显示（尝试其他答案）

1 个答案: