Question

我正在尝试使用Google Gecoding API，以便我可以从街道地址获取坐标并将其与Google地图一起使用。当我刚刚使用谷歌地图时，我没有遇到任何问题。我一直在关注指南，因为我不太了解JavaScript。我收到了错误

ReferenceError：谷歌未定义

当我打开inspect元素控制台时。

我一直在谷歌搜索，我认为问题是当我运行我的JavaScript的第一部分时，地图没有初始化，因为我只在地理编码部分得到错误。但我不知道该做什么或如何解决它。希望得到一些帮助。

以下是我的观点：

    <div class="full">
            <div class="saloon-main col-md-8">
                <h1 class="display-2">@Model.SaloonName</h1>
                <p class="saloon-adress">Andress 99 PostNr, Stad / TelNr: +46 21-123 45</p>
                <button type="button" class="btn-primary">Boka tid</button>
            </div>
            <div class="company-right-nav col-md-4">
                <div class="col-sm-12 saloon-info">
                    <ul class="list-unstyled">
                        <li>@Model.SaloonName</li>
                        <li>Email: @Model.Email</li>
                        <li>Telefon</li>
                        <li>Adress</li>
                    </ul>

                    <ul>
                        <li>ÖPPETTIDER</li>
                        <li>Måndag:</li>
                    </ul>
                </div>

                <div id="map">
                    <p>map</p>
                </div>
            </div>
            <div class="clear"></div>
        </div>




<script>
    geocoder = new google.maps.Geocoder();

    function getCoordinates (adress, callback) {
        var coordinates;
        geocoder.geocode({ adress: adress }, function (results, status) {
            coords_obj = results[0].geometry.location;
            coordinates = [coords_obj.nb,coords_obj.ob];
            callback(coordinates);
        })
    }

    var map;
    function initMap() {

        getCoordinates('4203 las palmas austin texas', function(coords) {
            var mapOptions = {
                zoom: 12,
                center: new google.maps.LatLng(coords[0], coords[1]),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'),
                mapOptions);
        })
    }

    google.maps.event.AddDomListener(window, 'load', initMap);
</script>

<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDfKu9XJ0jr19cj46HYSqQrNDU-oX0LKmY&callback=initMap"
        type="text/javascript"></script>

Answer 1

尝试以下代码

无需触发事件。当库完成加载时，initMap将自动调用。

var map;
function initMap() {
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': '4203 las palmas austin texas' }, function (results, status) {
        if (status == 'OK') {
            coords_obj = results[0].geometry.location;
            var mapOptions = {
                zoom: 12,
                center: new google.maps.LatLng(coords_obj.lat(), coords_obj.lng()),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

<style>
    #map {
        position: unset !important;
    }
</style>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfKu9XJ0jr19cj46HYSqQrNDU-oX0LKmY&callback=initMap"></script>
<div id="map"></div>

谷歌地图API /地理编码未捕获ReferenceError：未定义谷歌

1 个答案: