Легенды Google Map не отображаются в Edge и Firefox - PullRequest
Новая
       35

Легенды Google Map не отображаются в Edge и Firefox

0 голосов
/ 10 июля 2019

У меня есть приложение Google Map. Я разработал в прошлом году. Я снова попробовал IE, Edge, Firefox, Chrome (ПК и телефоны Android) и Safari (iPhone). Это работало отлично. Никто не жаловался. Тогда я только что узнал, что легенда карты не отображается на Edge и Firefox

Вот снимок кодов. Я организовал коды наилучшим образом. Я должен отфильтровать нерелевантные коды.

Ниже снимок экрана показывает, что он работает под IE и Chrome. Safari под iPhone имеет аналогичный вывод

enter image description here На изображении ниже показан результат в Edge. Обратите внимание на все метки X. Это должны быть легенды

enter image description here

На рисунке ниже показан результат в Firefox

enter image description here

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
   });

1 Ответ

0 голосов
/ 10 июля 2019

Я изменил ваш код, похоже, отсутствует }.И я отодвинул $(document).ready(function () {, при этом функция initialize() не будет вызываться.Я установил значение маркера для тестируемого кода, и он хорошо работает во всех браузерах, маркер появится.Вы можете проверить мою демонстрацию, результат в Edge (FireFox такой же) равен как этот после того, как я нажму #btnSearch. 

<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>
...