Question

我有一个Google Map应用程序。我去年开发的。我再次品尝了IE，Edge，Firefox，Chrome（PC和Android手机）和Safari（iPhone）。效果很好。没有人抱怨。然后我才发现地图图例未显示在Edge和Firefox上

这是代码的快照。我已尽力组织了代码。我必须过滤不相关的代码。

下面的屏幕快照表明它正在IE和Chrome下运行。 iPhone下的Safari具有类似的输出

下图显示了Edge中的结果。注意所有X标记。那些应该是传奇

下图显示了Firefox中的结果

var map;
var gmarkers = [];

$(document).ready(function () {

function initialize() {
        var mapProp = {
        center: new google.maps.LatLng(33, -117), //some arbitrary values
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    google.maps.event.addDomListener(window, 'load', function () {
        initialize();
    });

    $(document).on("click", "#btnSearch", function (e){             
        google.maps.event.trigger(window, 'resize', {});
        //get latitude and logitude values
        var infowindow = new google.maps.InfoWindow({
            content: ''
        });
        //ajax function to get the list of address from database based on dropdowncitylist
        //traced the codes and found out addresses retrieve correctly
        //the list of addresses are stored in data variable
        $.each(data, function (index, value) {
            var latlng = new google.maps.LatLng(value.Latitude, value.Longitude);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            gmarkers.push(marker);
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.close();
                infowindow.open(map, marker);
            });
       });//end of clicking function
   });

Answer 1

我修改了您的代码，似乎缺少了}。我将$(document).ready(function () {移开了，因此initialize()函数将不会被调用。我为代码设置了要测试的标记值，并且该标记值在所有浏览器中都能正常运行，该标记将出现。您可以查看我的演示，单击#btnSearch后，Edge（FireFox相同）中的结果为like this。

<script>        
    var map;
    var gmarkers = [];
    var latlng = new google.maps.LatLng(-25.363882, 131.044922);

        function initialize() {
            var mapProp = {
                center: latlng, 
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        }

        google.maps.event.addDomListener(window, 'load', function () {
            initialize();
        });

        $(document).on("click", "#btnSearch", function (e) {
            google.maps.event.trigger(window, 'resize', {});
            var infowindow = new google.maps.InfoWindow({
                content: ''
            });
            //$.each(data, function (index, value) {
                //var latlng = new google.maps.LatLng(value.Latitude, value.Longitude);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                gmarkers.push(marker);
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.close();
                    infowindow.open(map, marker);
               // });
            });
        });
</script>

<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
    <input type="button" id="btnSearch" value="search" />
</body>

Edge和Firefox上未显示Google Map图例

1 个答案: