1

要点を言えば、JSON 経由でプルされたカスタム マーカーを使用して gmap を作成しています。検索機能も提供する必要があります。入力された郵便番号 (AU) に最も近いマーカー。

マーカー表示 (および配列からのその他のデータ) は正常に動作します。私のお尻を蹴ったのは、この 2 番目の部分です。私はJSが苦手です。現時点で私がやろうとしているのは、入力された郵便番号の緯度と経度を返すことだけですが、機能全体を実行する方法を誰かが教えてくれれば、それは素晴らしいことです. 誰かが私を正しい方向に向けることができますか? JS とマークアップを以下に示します。ご協力いただきありがとうございます。

JavaScript:

function initialize() {
  /* Map setup */
  var latlng = new google.maps.LatLng(XXX, XXX);
  var mapOptions = {
     center: latlng,
     zoom: 16,
     mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  /* Map initialise */
  var map = new google.maps.Map(document.getElementById("map-canvas"),
     mapOptions);

  /* set iconpath */
  var iconBase = '/path-to-icons';

  /* create a separate shadow icon */
  var markerShadow = {
     url: iconBase + 'icon_map-shadow.png',
     anchor: new google.maps.Point(15, 25)
  };

  /* Get JSON */
  jQuery.getJSON('/path-to/markers.json', function (mapdata) {
      $.each(mapdata, function (key, data) {
        var latlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
           position: latlng,
           map: map,
           icon: iconBase + 'icon_map.png',
           shadow: markerShadow,
           address: data.address,
           subaddress: data.subaddress,
           title: data.title
        });
        /* For the showing of the details */
        // TODO : MAKE THIS NEATER
        google.maps.event.addListener(marker, 'click', function () {
           $("#map-details .inner").hide();
           $("#map-details .inner span").html("");
           $("#map-details .inner .neareststore").html(marker.title);
           $("#map-details .inner .address").html(marker.address);
           $("#map-details .inner .sub-address").html(marker.subaddress);
           $("#map-details .inner").fadeIn(200);
        });
     });
  });
};
google.maps.event.addDomListener(window, 'load', initialize);

function geocode() {
  $("#search").submit(function(e){
    e.preventDefault();
    var currentloc = $("#postcode").val();
    var url = "http://maps.googleapis.com/maps/api/geocode/json?address="+currentloc+"+AU&sensor=false";
    $.getJSON(url, function(data) {
      //JSON function
    }); 
  };
};

基本フォーム HTML:

<form action="" method="post" id="search">
  <fieldset>
    <input name="postcode" id="postcode">
    <input type="submit" id="postcodesearch" value="search">
  </fieldset>
</form>




*編集* -回答済み自分の質問にはまだ答えられませんが、ここにリンクされているHaversine式を使用してこれを解決しました: Google Maps Api v3-最も近いマーカーを見つける

整理が必要ですが、これが後世のために要点です。助けてくれてありがとう。

function rad(x) {return x*Math.PI/180;}
function find_closest_marker( _lat , _lng  ) {

    var lat = _lat;
    var lng = _lng;
    var R = 6371; // radius of earth in km
    var distances = [];
    var closest = -1;
    for( i=0;i<map.markers.length; i++ ) {
        var mlat = map.markers[i].position.lat();
        var mlng = map.markers[i].position.lng();
        var dLat  = rad(mlat - lat);
        var dLong = rad(mlng - lng);
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        var d = R * c;
        distances[i] = d;
        if ( closest == -1 || d < distances[closest] ) {
            closest = i;
        }
    }
    var closest = map.markers[closest];

    map.setCenter(closest.getPosition());
    $("#map-details .inner").hide();
    $("#map-details .inner span").html("");
    $("#map-details .inner .neareststore").html(closest.title);
    $("#map-details .inner .address").html(closest.address);
    $("#map-details .inner .sub-address").html(closest.subaddress);
    $("#map-details .inner").fadeIn(200);
}

$(document).ready(function(){
    $("#search").submit(function(e){
      e.preventDefault();
      var currentloc  = $("#postcode").val();
      var url         = "http://maps.googleapis.com/maps/api/geocode/json?address="+currentloc+"+AU&sensor=false";
      $.getJSON(url, function(data) {

        var lat = data.results[0].geometry.location.lat;
        var lng = data.results[0].geometry.location.lng;
        find_closest_marker(lat,lng)
      });
    });
});
4

1 に答える 1

1

最後から 2 番目の行に構文エラーがあります。});の代わりにする必要があります};

これは次のようになります。

    function geocode() {
  $("#search").submit(function(e){
    e.preventDefault();
    var currentloc = $("#postcode").val();
    var url = "http://maps.googleapis.com/maps/api/geocode/jsonaddress="+currentloc+"+AU&sensor=false";
    $.getJSON(url, function(data) {
      //JSON function
    }); 
  });
};

使ったhttp://www.dirtymarkup.com/で構文エラーをチェックします。本当に便利です。

そして、https://developers.google.com/maps/documentation/geocoding/#JSONから、JSON 出力形式を教えてくれます。したがって、緯度/経度を取得するには、次を使用します。

data.results.geometry.location.latとdata.results.geometry.location.lng

于 2013-05-19T23:47:32.053 に答える