0

誰かが私を助けてくれるのではないかと思います。

以下のコードを使用して、ユーザーが住所の詳細を入力したときに Google マップのオートコンプリート アクションを実行しています。

// JavaScript Document
var geocoder;
var map;
var marker;

function initialize(){
  var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(54.312195845815246, -4.45948481875007),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_RIGHT
    },
    navigationControl: true,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.ZOOM_PAN,
      position: google.maps.ControlPosition.TOP_LEFT
    },
    scaleControl: true,
    scaleControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_LEFT
    }
  };

  map = new google.maps.Map(document.getElementById('map'), myOptions);
  geocoder = new google.maps.Geocoder();
  marker = new google.maps.Marker({
    map: map,
    draggable: true
  });
}

$(document).ready(function() { 
  initialize();
  $(function() {
    $("#address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {       
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {
        $("#osgb36lat").val(ui.item.latitude);
        $("#osgb36lon").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location); 
        map.setZoom(16); 
        map.setCenter(location);

      }
    });
  });

  google.maps.event.addListener(marker, 'dragend', function() {
    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          $('#address').val(results[0].formatted_address);
          $('#osgb36lat').val(marker.getPosition().lat());
          $('#osgb36lon').val(marker.getPosition().lng());

          var point = marker.getPosition();
          map.panTo(point);
        }
      }
    });
  });
})

これが私のフォーム内に配置する方法です。

<div>
  <input name="address" type="text" id="address" size="40" maxlength="40" style="font:Calibri; font-size:12px" />
</div>

私が今できるようにしたいのは、リストで表示できるアイテムの数を制限することです。いくつかのフォーラムと Google マップ サイトで調査を行いましたが、解決策が見つからないようです。そのため、これが可能かどうかさえわかりません。

誰かがこれを見て、どうすればこれを行うことができるかについて少しガイダンスを提供してくれるかどうか疑問に思いました.

多くの感謝と親切な敬意

4

2 に答える 2

4

Google Maps V3 API には、テキスト入力フィールドを場所や場所のオートコンプリートに適応させるオートコンプリート機能が含まれるようになりました。サムネイルはまだ表示されていませんが、場所の追加はいくつかのユースケースに最適です。詳細は次のとおりです。

ドキュメント: http://code.google.com/apis/maps/documentation/javascript/places.html#places_autocomplete

参照: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

例: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

これらはあなたを助けると思います.....

于 2012-05-28T13:46:42.507 に答える
2

さらに調査した結果、ここですばらしいチュートリアルを見つけました：http: //rjshade.com/2012/03/27/Google-Maps-autocomplete-with-jQuery-UI/これを適応させることができました。

于 2012-05-31T12:49:50.663 に答える