gpt4 book ai didi

javascript - map API v3 地理编码

转载 作者:行者123 更新时间:2023-11-28 02:14:21 27 4
gpt4 key购买 nike

开门见山:我正在构建一个 gmap,其中包含通过 JSON 拉取的自定义标记。我还需要提供搜索功能;距输入的邮政编码 (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>




* 编辑 * - 已答复还不能回答我自己的问题,但已经使用此处链接的半正弦公式解决了这个问题: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)
});
});
});

最佳答案

您的倒数第二行有语法错误;它应该是 }); 而不是 };

应该是这样的:

    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.latdata.results.geometry.location.lng

关于javascript - map API v3 地理编码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16640544/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com