地圖API v3地理編碼

直指點：我正在構建一個帶有通過JSON拉取的自定義標記的gmap。我還需要提供搜索功能;與輸入的郵編（AU）最近的標記。地圖API v3地理編碼

標記顯示（和陣列中的其他數據）工作正常，這是我的屁股踢了第二部分。我對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 - find nearest markers

它需要一些整理，但這是爲了後代的要點。感謝所有的幫助。

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

來源

2013-05-19 Steve GuyFace

您是否獲得某種試圖返回輸入的緯度和經度時的錯誤？ – summea

我收到了「意外標記}」，這意味着我在某處有語法錯誤，但找不到它。 –

查看[google.maps.geometry.spherical.computeDistanceBetween方法]（https://developers.google.com/maps/documentation/javascript/reference#spherical）（而不是自己編寫代碼） – geocodezip

您的倒數第二行有語法錯誤;它應該是});代替};

它應該是這樣的：

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-19 23:47:32

地圖API v3地理編碼

回答

相關問題