谷歌地圖api v3和自動完成jquery

-1

我想添加一個簡單的自動完成輸入文本與jQuery和谷歌地圖V3，城市，這裏是我的HTML代碼插入搜索字段;谷歌地圖api v3和自動完成jquery

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

});

當我試圖打一個城市在我輸入文本字段，沒有任何反應，有人可以幫我找出我的代碼中有什麼問題嗎？非常感謝！

來源

2013-06-24 Nizar B.

在您的控制檯中有任何錯誤？ – Chanckjh

嗨Chanckjh，感謝您的關注，這裏是調試控制檯的結果：http：//pastie.org/8073876 –

結果在哪裏？ – Chanckjh

你整個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。

希望你明白。

來源

2013-06-24 08:18:55 Praveen

非常感謝！ –

@Katcha我很高興能夠提供幫助。 – Praveen

谷歌地圖api v3和自動完成jquery

回答

相關問題