Question

我正在尝试使用jQuery和Google Map V3添加一个简单的自动完成输入文本，这是我的HTML代码，用于插入搜索字段;

<input id="places" class="ui-bar-d ui-input-text ui-body-null ui-shadow-inset ui-body-d ui-autocomplete-input ui-corner-all" placeholder="Which city ?" data-type="search">

我按照此页面的代码来源：Jquery mobile with Google map v3

我在外部JS文件中添加了这段代码：

$(function() {

function PlacesSearchControl(str) {
    var el = document.createElement('DIV');
    var wrap = document.createElement('DIV');
    var input = document.createElement('INPUT');
    el.appendChild(wrap);
    wrap.appendChild(input);
    $(el).attr('id', 'control');
    $(input).addClass('ui-bar-d ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d ui-autocomplete-input');
    $(input).attr('id', 'places');
    $(input).val(str);
    $('#map_canvas').gmap('autocomplete', input, function(ui) {
        $('#map_canvas').gmap('clear', 'markers');
        $('#map_canvas').gmap('set', 'bounds', null);
        $.mobile.pageLoading();
        $('#map_canvas').gmap('placesSearch', { 'location': ui.item.position, 'radius': '5000'/*, 'name': ['store']*/ }, function(results, status) {
            if ( status === 'OK' ) {
                $.each(results, function(i, item) {
                    $('#map_canvas').gmap('addMarker', { 'id': item.id, /*'icon': item.icon,*/ 'position': item.geometry.location, 'bounds':true }).click(function() {
                        $('#map_canvas').gmap('openInfoWindow', {'content': '<h4>'+item.name+'</h4>'}, this);
                    });
                });
            }
            $.mobile.pageLoading(true);
        });
    });
    $(input).focus(function() {
        if ( $(this).val() === str ) {
            $(this).val('');
        }
    }).blur(function() {
            if ( $(this).val() == '' ) {
                $(this).val(str);
            }
        });
    return el;
}

$('#map_canvas').gmap({'center': '58.00, 12.00', 'zoom': 3, 'disableDefaultUI': true, 'mapTypeId': 'roadmap'}).bind('init', function(event, map) {
$('#map_canvas').gmap('addControl', new PlacesSearchControl('Search places...'), 1);
});

});

当我在输入文本字段中尝试点击某个城市时，没有任何反应，有人可以帮助我找出我的代码中的错误吗？非常感谢！

Answer 1

在您Javascript的整个过程中，您使用了名为 map_canvas 的ID，但是HTML代码中没有该元素。如果您已经拥有HTML代码，那么我确定您没有正确使用这些脚本。

$('#map_canvas').gmap('autocomplete', input, function(ui) {
        $('#map_canvas').gmap('clear', 'markers');
        $('#map_canvas').gmap('set', 'bounds', null);
        $.mobile.pageLoading();
        $('#map_canvas').gmap('placesSearch', { 'location': ui.item.position, 'radius': '5000'/*, 'name': ['store']*/ }, function(results, status) {
            if ( status === 'OK' ) {
                $.each(results, function(i, item) {
                    $('#map_canvas').gmap('addMarker', { 'id': item.id, /*'icon': item.icon,*/ 'position': item.geometry.location, 'bounds':true }).click(function() {
                        $('#map_canvas').gmap('openInfoWindow', {'content': '<h4>'+item.name+'</h4>'}, this);
                    });
                });
            }
            $.mobile.pageLoading(true);
        });
    });

您已复制粘贴了示例中使用的整个代码是问题所在。我的猜测是你想要only the search textBox。如果是这样，请检查此 FIDDLE。
如果您尝试autocomplete with textbox，那么基于我做的一个例子 JSFiddle中的DEMO。

希望你理解。

Google MAP api v3和自动填充jquery

1 个答案: