我创建了网络应用程序,用户将在其中记录他们的谷歌坐标。 为此,我在前端 javascript 中使用了谷歌地图 API。
我有来自 godaddy 的域名和 VPS 服务器。我还在服务器中安装了 SSL 证书。
但问题是 map 经常无法工作,并且当页面加载时它会挂起。见下文。
然后我重新生成 key 并重新启动服务器,这需要花费大量时间来解决每次发生的问题。
有什么方法可以永久解决这个问题吗? 您遇到过这样的问题吗?
Google map 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>
最佳答案
如果您的 ajax 调用未成功返回,则不会创建 map ,因为仅当 ajax 调用返回成功时才会创建 map 。您可以在 ajax 调用之前移动 map 和标记创建代码,如下所示:
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 调用之前创建 map 和标记。如果 ajax 调用成功,则会设置城市、位置和坐标字段,否则不会设置。在任何一种情况下, map 和标记创建都会发生,并且页面上不会有空白 map 。
关于Javascript GooglMaps API 句柄经常不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52291707/