映射API v3地理编码
Maps API v3 geocoding
直截了当地说:我正在构建一个通过JSON提取自定义标记的gmap。我还需要提供搜索功能;与输入的邮政编码(AU)最近的标记。
标记显示(和来自数组的其他数据)工作得很好,这是第二部分,我的屁股踢。我不擅长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>
* EDIT * -已回答还不能回答我自己的问题,但已经解决了这个使用Haversine公式链接在这里:谷歌地图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)
});
});
});
倒数第二行有语法错误;应该是});
而不是};
应该是这样的:
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
相关文章:
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 标记的实时更新,无需加载页面谷歌地图API V3
- 将地理编码结果转换为php变量以发布到mysql数据库
- 从Google Maps JavaScript API V2迁移到V3,编码多边形
- 尝试在谷歌地图V3中绘制超过10个标记,不使用地理编码
- Googlemap v3反向地理编码
- 谷歌地图 api v3 对多个地址进行地理编码
- 我们能否让谷歌地图Javascript地理编码API v3在响应中返回自定义标识符
- 使用谷歌地图api v3将地名编码
- 谷歌地图API v3地理编码,不总是加载所有标记
- 如何使用谷歌地图JavaScript API v3's Filter.js中的地理编码服务
- 多个标记与谷歌地图API V3使用邮政编码地理编码
- 反向地理编码v3
- 映射API v3地理编码
- 谷歌地图api v3 -删除旧的标记时,做地理编码
- 谷歌地图API v3 -和地理编码(英国邮政编码)
- 谷歌地图API v3 -地理编码
- 使用API v3绘制多个编码折线
- 谷歌地图API v3地理编码OVER_QUERY_LMIT