-1

I'm trying to add a simple auto-complete input text with jQuery and Google Map V3, for the city, here is my HTML code to insert the search field;

<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">

I followed the code source of this page: Jquery mobile with Google map v3

I added this code in an external JS file:

$(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);
});

});

When I'm trying to hit a city in my input text field, nothing happens, can someone help me to find out what's wrong in my code? Thanks a lot!

4

1 回答 1

2

在整个过程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 中制作的 示例。

希望你明白。

于 2013-06-24T08:18:55.737 回答