首页 > 解决方案 > InvalidValueError:NaN 不是可接受的纬度值

问题描述

运行以下 Javascript 代码时出现此错误:

<script>
        var map;
        var service;
        var infowindow;

        function initMap() {
            infowindow = new google.maps.InfoWindow();

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

            var geocoder = new google.maps.Geocoder();

            var latlng = geocodeAddress(geocoder);

            var lat = parseFloat(latlng.lat);
            var lng = parseFloat(latlng.lng);

            document.getElementById('<%= btnPredict.ClientID %>').addEventListener('click', function () {
                searchNearbyClinic(parseFloat(lat),parseFloat(lng));
            });
        }

        function geocodeAddress(geocoder) {
            var lat = '';
            var lng = '';

            var address = document.getElementById('<%= tbZIP.ClientID %>').value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status === 'OK') {
                    lat = results[0].geometry.location.lat();
                    lng = results[0].geometry.location.lng();
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
            return { lat: lat, lng: lng };
        }

        function searchNearbyClinic(lat,lng) {
            var chosenLocation = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

            var request = {
                location: chosenLocation,
                keyword: 'health clinic',
                radius: 5000
            };

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

            var service = new google.maps.places.PlacesService(map);
            service.search(request, function (results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    for (var i = 0; i < results.length; i++) {
                        createMarker(results[i]);
                    }

                    map.setCenter(results[0].geometry.location);
                }
            });
        }

        function createMarker(place) {
            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);
            });
        }
</script>

关于我正在做的事情的一点背景:我有一个 ASP.NET 页面,它有一个文本框 (tbZIP) 和一个按钮 (btnPredict),在其中将邮政编码输入文本框后,该按钮将尝试显示地图它包含附近区域的搜索地点(由邮政编码定义),但不知何故,纬度和经度在这里的格式不正确,尽管我已将它们转换为浮点数(通过使用 parseFloat)并且文本框中的值都是数字。

我对 Javascript 很陌生,所以我想我一定错过了一些非常基本的东西。任何回应将不胜感激!

标签: javascriptgoogle-maps-api-3google-places-apigoogle-geocoding-apigoogle-api-javascript-client

解决方案


推荐阅读