Question

我正在使用jQuery的自动完成功能。我想根据它绘制地图从自动完成中选择的结果。我有 lat / long使用在变量“latlong”中捕获

谷歌地图代码：

  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它画得很好。问题是，对于我的使用，我需要等待画画直到自动完成事件发生后我才能这样做捕获正确的纬度/经度。我不确定如何触发谷歌一旦我捕获了lat / long

，就会刷新地图

感谢您的想法

Answer 1

我正在使用带有jquery的BMap来绘制谷歌地图。这更容易，效果很好。

Answer 2

如果您希望在用户从自动填充框中选择内容后执行操作，请为自动填充框的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)
    }

希望这有帮助

谷歌地图api的jQuery自动完成结果

2 个答案: