Google地图未在Internet Explorer中绘制标记

时间:2019-02-11 19:15:15

标签: jquery laravel google-maps

以下代码在Chrome和FireFox中可以正常运行(当然!)。但是,当它在Internet Explorer中运行时,它不起作用。

代码应迭代一个JSON字符串,并在地图上为每个city_name绘制一个标记。但是,在Internet Explorer中,控制台中出现以下错误-

  

无法获取未定义或空引用的属性“ city_name”

代码如下-

<script src="https://maps.googleapis.com/maps/api/js?key={{get_option('google_map_api_key')}}&libraries=places&callback=initMap" async defer></script>
<script type="text/javascript">
    function initMap() {
        var resultsNonJSON = document.getElementsByName('tbResults')[0].value;
        var jsonResults = JSON.parse(resultsNonJSON);
        var geocoder = new google.maps.Geocoder();
        var myLatLng = {lat: 53.810066, lng: -1.776427};

        var map = new google.maps.Map(document.getElementById('dvMap'), {
            center: {lat: 54.636633, lng: -2.952166},
            zoom: 6
        });

        var prev_infowindow = false;

        for (let i = 0; i < jsonResults.length; i++) {
            var obj = jsonResults[i];

            geocoder.geocode({ 'address': obj.city_name.concat(", UK") }, function (results, status) {
                if (status == 'OK') {
                    town = jsonResults[i].city_name;
                    counter = jsonResults[i].counter;

                    var contentString = '<div id="content">'+
                        '<div id="siteNotice"></div>'+
                        '<h1 id="firstHeading" class="firstHeading">' + town + '</h1>'+
                        '<div id="bodyContent">'+ counter + ' wanted' +
                        '</div>'+
                        '</div>';

                    var infowindow = new google.maps.InfoWindow({
                      content: contentString
                    });

                    if(counter <= 10)
                    {
                        var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        title: obj.city_name,
                        icon: {
                            url: "https://maps.google.com/mapfiles/ms/icons/green-dot.png"
                        }
                    });
                    }
                    else if(counter <= 99)
                    {
                        var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        title: obj.city_name,
                        icon: {
                            url: "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
                        }
                    });
                    }
                    else if(counter >= 100)
                    {
                        var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        title: obj.city_name,
                        icon: {
                            url: "https://maps.google.com/mapfiles/ms/icons/red-dot.png"
                        }
                    });
                    }

                    marker.addListener('click', function() {
                        if(prev_infowindow) {
                            prev_infowindow.close();
                        }

                        prev_infowindow = infowindow;
                        infowindow.open(map, marker);
                    });
                }
                else 
                {
                  alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }                   
    }
</script>

0 个答案:

没有答案