谷歌地圖API的jQuery自動完成結果

我正在使用jQuery的自動完成。我想根據從自動填充中選擇的結果繪製地圖。我有經/緯來使用捕捉變量「經緯度」谷歌地圖API的jQuery自動完成結果

谷歌地圖代碼：

var map = new GMap2($("#map").get(0)); 
    var burnsvilleMN = new GLatLng(latlong); 
    map.setCenter(burnsvilleMN, 8); 

    // setup 10 random points 
    var bounds = map.getBounds(); 
    var southWest = bounds.getSouthWest(); 
    var northEast = bounds.getNorthEast(); 
    var lngSpan = northEast.lng() - southWest.lng(); 
    var latSpan = northEast.lat() - southWest.lat(); 
    var markers = []; 
    for (var i = 0; i < 10; i++) { 
     var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
      southWest.lng() + lngSpan * Math.random()); 
    marker = new GMarker(point); 
    map.addOverlay(marker); 
    markers[i] = marker; 
    } 

    $(markers).each(function(i,marker){ 
    $("<li />") 
    .html("Point "+i) 
    .click(function(){ 
    displayPoint(marker, i); 
    }) 
    .appendTo("#list"); 

    GEvent.addListener(marker, "click", function(){ 
    displayPoint(marker, i); 
    }); 
    }); 

    $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); 

    function displayPoint(marker, index){ 
    $("#message").hide(); 

    var moveEnd = GEvent.addListener(map, "moveend", function(){ 
    var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng()); 
    $("#message") 
    .fadeIn() 
    .css({ top:markerOffset.y, left:markerOffset.x }); 

    GEvent.removeListener(moveEnd); 
    }); 
    map.panTo(marker.getLatLng()); 
    }

如果我把谷歌地圖代碼的任何地方在頁面一個硬編碼的 lat/long它很好。問題是，對於我的使用，我需要等待繪製地圖，直到自動完成事件發生後，我可以用捕獲正確的緯度/經度。我不知道如何觸發谷歌地圖刷新一次，我已經捕獲了經/緯

感謝您的想法

來源

2010-10-21 specked

還有一個更大的問題是你的pastebin代碼。如果您複製並粘貼代碼以在IF的下一部分中更改變量名稱，那麼您正在做的事情非常錯誤。整個程序應該是它的大小的一半或更少。你應該看看OOP ......我甚至不想看看pastebin代碼，因爲它大膽地違背了最佳實踐。 – Incognito 2010-10-21 13:57:40

我沒有複製粘貼代碼來更改變量名稱。此外，我只是想獲得功能，然後我會清理代碼。更重要的是，你沒有時間通過嘗試傾倒在我的身上來提升你的自我。噓 – specked 2010-10-21 14:23:35

我使用BMAP使用jQuery繪製谷歌地圖。這很容易，而且效果很好。

來源

2010-10-21 14:22:06 specked

如果你希望用戶從自動完成框中選擇的東西后，你的自動完成框的選擇事件，這將以此爲標記提供一個回調函數的動作發生：例如

$(function(){ 

     //your autocomplete data structure - here lat and long values are made up so pls use real ones 
     var places = [{ 
      label: "Place 1", 
      lat: "34", 
      lng: "134" 
     }, { 
      label: "Place 2", 
      lat: "34", 
      lng: "134" 
     }, { 
      label: "Place 3", 
      lat: "34", 
      lng: "134" 
     }]; 
     $("#tags").autocomplete({ 
      source: places, 
      select: function(event, ui){ 
       //grab the new marker's lat long - assuming you are storing it in an array of objects as above 

       item = ui.item; 
       //draw the new marker on a the map 
       showMarker(item.lat,item.lng) 
       //if you like pan to the new marker 

      } 
     }); 
    }); 

function showMarker(lat,lng){ 
     var point = new GLatLng(lat,lng); 
     //add a marker 
map.addOverlay(new GMarker(point)); 
//if you want pan the map to marker - assuming that your map object is called "map" 
    map.panTo(point) 
    }

希望這幫助

來源

2010-10-21 20:53:52 Michal

谷歌地圖API的jQuery自動完成結果

回答

相關問題