Результат автозаполнения jQuery для Google Map API

Question

Я использую автозаполнение jQuery. Я хотел бы нарисовать карту на основе результат, выбранный из автозаполнения. у меня есть широта / долгота для использования захваченного в переменной "latlong"

код автозаполнения: http://pastebin.com/YTNnDS51

код карты Google:

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

если я положу код карты Google в любое место на странице с жестким кодом широта / долгота это прекрасно рисует. Проблема в том, что для моего использования мне нужно подождать, чтобы нарисовать карта, пока не произойдет событие автозаполнения, чтобы я мог захватить правильный лат / лонг. Я не уверен, как вызвать Google карта обновиться после того, как я захватил этот лат / лонг

Спасибо за ваши мысли

Answer 1

Если вы хотите, чтобы действие происходило после того, как пользователь выбирает что-либо из поля автозаполнения, предоставьте функцию обратного вызова для события select вашего блока автозаполнения, которая будет рисовать маркер: Например,

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

Надеждаэто помогает

Answer 2

Я использую BMap с jquery, чтобы нарисовать карту Google. Это намного проще и прекрасно работает.