时间戳

首页 > 解决方案 > Javascript GooglMaps API 句柄不经常工作

javascript - Javascript GooglMaps API 句柄不经常工作

问题描述

我创建了网络应用程序，用户将在其中记录他们的谷歌坐标。为此，我在前端 javascript 中使用了 google maps API。

理想情况下，页面如下所示。 在此处输入图像描述

我有来自 godaddy 的域和 VPS 服务器。我还在服务器中安装了 SSL 证书。

但问题通常是 MAPS 无法正常工作，并且当页面加载时它会挂起。见下文。 在此处输入图像描述

然后我重新生成密钥并重新启动服务器，这需要花费大量时间来解决每次发生的问题。

有什么办法可以永久解决这个问题吗？你遇到过这样的问题吗？

谷歌地图API如下：

    <script>
        $(document).ready(function(){
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showLocation);
        }else{ 
            $('#location').html('Geolocation is not supported by this browser.');
        }
    });

    function showLocation(position){    
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var baseurl = $('#baseurl').val();
        $.ajax({
            type:'POST',
            url: baseurl+'dailyvisit/getLocation',
            data:'latitude='+latitude+'&longitude='+longitude,
            success:function(msg){
                if(msg){
                    //alert(msg);
                    var data = msg.split('|');
                    var city = data[0].split(' - ');
                    var count = city.length;
                    $('#city').val(city[1]);
                   $("#location").val(city[0]+","+city[1]+","+city[2]);
                   $('#co_ordinates').val(data[1]+","+data[2]);
                var map;

                   var latitude = Number(data[1]); // YOUR LATITUDE VALUE
                var longitude = Number(data[2]); // YOUR LONGITUDE VALUE

                var myLatLng = {lat: latitude, lng: longitude};

                map = new google.maps.Map(document.getElementById('map'), {
                  center: myLatLng,
                  zoom: 14                    
                });

                var marker = new google.maps.Marker({
                  position: myLatLng,
                  map: map,
                  //title: 'Hello World'

                  // setting latitude & longitude as title of the marker
                  // title is shown when you hover over the marker
                  title: latitude + ', ' + longitude 
                });            
                }else{
                    $("#location").html('Not Available');
                }
            }
        });
    }
        function visit_validation()
        {
                var err = 0;
      var customer = $('#customerId').val();
      var contact_number = $('#contact_number').val();
      var contact_email = $('#Contact_email').val();
    /*  var name = $('#prodNameEdit').val();
      var price = $('#prodPriceEdit').val();
      var qty = $('#prodQtyEdit').val();
      var bfast = $('#breakfastEdit').val();
      var lunch = $('#lunchEdit').val();
      var dinner = $('#dinnerEdit').val();*/

      if(customer==''){
         $('#customerId_err').html('Customer name is required!');
         err++;
      }else{
         $('#customerId_err').html('');
      }
      if(contact_number.trim()==''){
            $('#cn_err').html('Contact Number is required!');
            err++;
        }else if(contact_number != parseInt(contact_number, 10)){ 
            $('#cn_err').html('Invalid Mobile Number!');
            err++;
        }else{
            $('#cn_err').html('');
        }     
             if(!ValidateEmail(contact_email) && contact_email.trim()!=''){ 
            $('#ce_err').html('Invalid Email ID!');
            err++;
        }else{
            $('#ce_err').html('');
        }       

      if(err>0){ return false; }else{ return true; }
        }
        function ValidateEmail(email){
    var expr = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    return expr.test(email);
    }
    </script>

标签： javascriptapigoogle-maps

解决方案

如果您的 ajax 调用未成功返回，则不会创建地图，因为仅当 ajax 调用返回成功时才会创建地图。您可以在 ajax 调用之前移动地图和标记创建代码，如下所示：

function showLocation(position){    
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var myLatLng = {lat: latitude, lng: longitude};

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

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      //title: 'Hello World'

      // setting latitude & longitude as title of the marker
      // title is shown when you hover over the marker
      title: latitude + ', ' + longitude 
    });   

    var baseurl = $('#baseurl').val();

    $.ajax({
        type:'POST',
        url: baseurl+'dailyvisit/getLocation',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
                //alert(msg);
                var data = msg.split('|');
                var city = data[0].split(' - ');
                var count = city.length;
                $('#city').val(city[1]);
               $("#location").val(city[0]+","+city[1]+","+city[2]);
               $('#co_ordinates').val(data[1]+","+data[2]);

            }else{
                $("#location").html('Not Available');
            }
        }
    });
}

这将在 ajax 调用之前创建地图和标记。如果 ajax 调用成功，将设置城市、位置和坐标字段，否则不会设置。在任何一种情况下，都会始终创建地图和标记，并且页面上不会出现空白地图。

推荐阅读