JavaScript карты Google не загружается полностью в мобильном браузере

#javascript #google-maps #google-maps-api-3

#javascript #google-карты #google-maps-api-3

Вопрос:

Моя проблема в том, что у меня есть некоторый код javascript, который вызывает API карт Google и отлично отображается, когда я просматриваю его с помощью браузера на своем рабочем столе, браузер, который я использую, — Google Chrome, но когда я пытаюсь просмотреть его с помощью своего телефона Android, он отображается не полностью, но когда я поворачиваюна моем экране все работает нормально.

введите описание изображения здесь

Когда я поворачиваю экран, он загружается нормально
введите описание изображения здесь

ниже приведен мой код

 var markers = new Array();
var map ;
function initialize(locations,firstLat,firstLng,hovericon,zoomLevel) {
  var locations = locations; 
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    scrollwheel           : false,
    zoom                  : zoomLevel,
    center                : new google.maps.LatLng( parseFloat(firstLat),  parseFloat(firstLng)),
    disableDefaultUI      : false,
    streetViewControl     : false,
    mapTypeControlOptions : { mapTypeIds: [] },
    mapTypeId             : google.maps.MapTypeId.ROADMAP
  });   
  map.setOptions({ minZoom: 3, maxZoom: 20 });
  var marker, i;
  map.setOptions({styles: styles});
  Object.size = function(obj) {
   var size = 0, key;
      for (key in obj) {
          if (obj.hasOwnProperty(key)) size  ;
      }
      return size;
   };
    var markerclusterer = null;
    var mc = new MarkerClusterer(map);
    for (i = 0; i < Object.size(locations); i  ) { 
      marker = new google.maps.Marker({
        position     : new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon         : site_url 'assets/front/images/' locations[i][4],
        map          : map,
        jobID        : locations[i][3],
        draggable    : false,
        originalicon : site_url '/assets/front/images/' locations[i][4],
        hovericon    : site_url 'assets/front/images/' hovericon,
        zIndex       : Math.round((locations[i][1], locations[i][2])*-100000)<<5
      });
      google.maps.event.addListener(marker, 'click', function() {
        //alert(this.jobID);
        var appElement=document.querySelector('[ng-app=yolomd]');
        var $rootscope = angular.element(appElement).scope();
        console.log($rootscope);
        $rootscope.ismarkerClicked=this.jobID;
        $rootscope.$apply();
          // window.location.href = this.jobID;
      });
      google.maps.event.addListener(marker, "mouseover", function() {
          this.setIcon(this.hovericon);
      });
      google.maps.event.addListener(marker, "mouseout", function() { 
          this.setIcon(this.originalicon); 
      });
      markers.push(marker);
      mc.addMarker(marker);
      function AutoCenter() 
      {
        var bounds = new google.maps.LatLngBounds();
          $.each(markers, function (index, marker) {
            bounds.extend(marker.position);
          });
        map.fitBounds(bounds);
      }

     if(zoomLevel==10){
       AutoCenter();
      }
      google.maps.event.trigger(map, "resize");
    }
}
  

Ответ №1:

Если вы используете устройство Android, в Google Chrome есть возможность подключиться к устройству и использовать для него инструменты разработчика. Практически вы получите консоль Chrome для устройства.

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Таким образом, вы можете видеть возникающие ошибки, если что-то не так с функциями javascript, или изменять параметры на ходу.

Я надеюсь, что это поможет.