从手机查看时,Javascript Google map api在我的网络应用中没有响应

时间:2017-08-24 13:45:45

标签: javascript html google-maps mobile

下面是我创建谷歌地图的代码,当我从我的桌面查看它们时它们正常工作但是当我调整浏览器大小或使用我的手机时我无法缩放,点击活动或地图上的任何内容,它们都在表演就像那种情况下的图像。我不知道可能是什么问题。我在点击事件上尝试了touchstart,但没有任何改变。有什么想法吗?

  <div class="col-md-5 col-xs-12" id="map" style="width:100%;height:600px;"></div>

  function mymodal(thismodal){
      $(thismodal).modal('show');
    }
          function initMap() {
            var myLatLng = {lat: 40.69951725159461, lng: 24.64619453476564};


           var locations = [
          ['Skala Rachoniou',40.782232, 24.614488, 1],
          ['Ormos Prinou', 40.7584839,24.5613919  , 2],
          ['Skala Kallirachis', 40.7067027,24.5288304, 3],
          ['limenaria', 40.627805,24.568963, 4],
          ['Pefkari', 40.61778,24.5892925, 5],
          ['Potos', 40.6108026,24.606527, 6],
          ['Giola', 40.5944829,24.6648514, 7],
          ['Moni Archaggelou', 40.5971617,24.6994095, 8] ,
          ['Thymonia Beach', 40.602884,24.7176294, 9],
          ['Aliki', 40.605479,24.7394179, 10],
          ['Agios Ioannis Beach', 40.6180698,24.7612051, 11],
          ['Makriammos Theologou', 40.6548492,24.7565726, 12],
          ['Loutra', 40.654139,24.7553921, 13],
          ['Kinira', 40.6649342,24.760148, 14],
          ['Chrisi Akti', 40.7103487,24.7519925, 15],
          ['Chrisi Ammoudia', 40.7314367,24.7576794, 16],
          ];
          var marker = [];



            var image='http://icons.iconarchive.com/icons/pan-tera/flags/32/Greece-Flag-icon.png';
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 5,
              center: myLatLng
            });

            var map1 =new google.maps.Map(document.getElementById('zoomed'), {
              zoom: 11,
              center: myLatLng
            });

            for ( var i = 0; i < locations.length; i++) {  
          marker[i] = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map1,
            icon:image,


          });
    var selector = "#myModal"+   i;


     }  google.maps.event.addListener(marker[0], 'click', function() {
        $("#myModal0").modal('show');
    });
    google.maps.event.addListener(marker[1], 'click', function() {
         $("#myModal1").modal('show');
    });

    google.maps.event.addListener(marker[2], 'click', function() {
         $("#myModal2").modal('show');
    });

    google.maps.event.addListener(marker[3], 'click', function() {
         $("#myModal3").modal('show');
    });

    google.maps.event.addListener(marker[4], 'click', function() {
         $("#myModal4").modal('show');
    });

    google.maps.event.addListener(marker[5], 'click', function() {
         $("#myModal5").modal('show');
    });

    google.maps.event.addListener(marker[6], 'click', function() {
         $("#myModal6").modal('show');
    });
    google.maps.event.addListener(marker[7], 'click', function() {
         $("#myModal7").modal('show');
    });

    google.maps.event.addListener(marker[8], 'click', function() {
         $("#myModal8").modal('show');
    });

    google.maps.event.addListener(marker[9], 'click', function() {
         $("#myModal9").modal('show');
    });

    google.maps.event.addListener(marker[10], 'click', function() {
         $("#myModal10").modal('show');
    });

    google.maps.event.addListener(marker[11], 'click', function() {
         $("#myModal11").modal('show');
    });

    google.maps.event.addListener(marker[12], 'click', function() {
         $("#myModal12").modal('show');
    });

    google.maps.event.addListener(marker[13], 'click', function() {
         $("#myModal13").modal('show');
    });
    google.maps.event.addListener(marker[14], 'click', function() {
         $("#myModal14").modal('show');
    });
    google.maps.event.addListener(marker[15], 'click', function() {
         $("#myModal15").modal('show');
    });


            var marker1 = new google.maps.Marker({
              position: myLatLng,
              map: map,
              title: 'Zoomed map'
            });


          }
        </script>

0 个答案:

没有答案