1

我基本上想在页面上有一个脚本，当它在页面上找到两个名为“lng”和“lat”的字段时显示地图。

这意味着如果页面上存在带值的字段，那么它将尝试显示地图，但如果没有，则不会。

这是我到目前为止的代码：http: //jsfiddle.net/spadez/xJhmk/3/

function mapDisplay() {

    var latval = $('input[id=lat]').val();
    var lngval = $('input[id=lng]').val();

    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(latval, lngval),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        scrollwheel: false,
        draggable: false
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}


$(function () {
    mapDisplay();
});

我目前不太擅长 jquery，但这是我尝试过的，但没有奏效：

if (latval !=NULL && lngval != NULL)){
...my code
}

有更多知识的人可以帮助我理解为什么这种方法不起作用吗？

4

6 回答 6

1

试试这个

if ( !isNaN(latval) && !isNaN(lngval)) {

所以基本上它检查 2 个输入是否是数字，并且只有当 true 才会进入 if 条件。

还

var latval = $('input[id=lat]').val();
var lngval = $('input[id=lng]').val();

可以安全地写为

var latval = $('#lat').val(),
    lngval = $('#lng').val();

您可以change为将显示地图的输入连接事件

代码

function mapDisplay() {

    var latval = $('#lat').val(),
        lngval = $('#lng').val();
      if (!isNaN(parseFloat(latval)) && !isNaN(parseFloat(lngval))) {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(latval, lngval),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            scrollwheel: false,
            draggable: false
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        $('#map_canvas').removeClass('hidden');
    } else {
        $('#map_canvas').addClass('hidden');
    }
}


$(function () {
    $('input').on('change', mapDisplay).trigger('change');
});

检查小提琴

于 2013-06-21T08:35:50.043 回答
1

你可以这样做：

var latval = $('#lat').val();
var lngval = $('#lng').val();

if ($.trim(latval) != '' && $.trim(lngval) != '') {
    // You code
  • 不需要这样做input[id=lat]，你可以直接调用它$('#lat')
  • 用于$.trim()删除字符串开头和结尾的空格。
于 2013-06-21T08:38:18.943 回答
1

您的代码是正确的：您只需在 CSS 中添加一行即可查看地图：

添加

display:block; in #map_canvas

像这样 ：

#map_canvas {
    display:block;
    height: 150px;
    width: 300px;
}

此外，您可以通过使用 jquery 设置此显示属性来更改其显示设置（取决于变量是否具有值。）。

默认情况下，文本框返回字符串值。所以对于空文本框，您可以检查：

if(latval=='' && lngval==''){alert('blank');}
else{your code;}
于 2013-06-21T08:38:59.543 回答
1

从文本框中返回的值不是 NULL 它只是一个空字符串，因此您应该检查该值是否为空

if(latval !="" && lngval !=""){
Your code
}

如果您只想指定数字，请尝试添加

$.isNumeric()

 if($.isNumeric(latval) && $.isNumeric(lngval )){
    Your code
    }
于 2013-06-21T08:43:20.713 回答
1

当您检查纬度/经度时，我还会检查它们是否为numeric。

function checkValues() {
    var valueOK = false;
    if($.isNumeric($('#lat').val())) { 
         if($.isNumeric($('#lng').val())) valueOK = true;
    }

    return valueOK;
}

$(function () {
    if(checkValues) {
         mapDisplay();
    }
}
于 2013-06-21T08:45:42.193 回答
1

您可以访问变量，例如

var lat = jQuery.trim($('#lat').val());
var lng = jQuery.trim($('#lng).val());

并检查字段是否为空

if(lat == '' && lng == '') {
    //do code
} else {
   //show the map
   $("#mapId").show();
}
于 2013-06-21T09:40:08.943 回答