使用谷歌地图API V3地理编码 - 链接原请求的响应 [英] Geocoding using Google Maps API v3 - Linking the original request to the response
问题描述
我的学校，我想在谷歌地图绘制的清单。我使用谷歌的地理编码服务来查找LNG /纬度特定职位code，在成功获取该信息我想与添加打开点击一个给定的标记时的信息框相应的事件监听器下降的标志，共同提高。
当我做出的地缘codeR它在一所学校的环境要求，当我收到一个回调我失去了这个环境。你会从code下面，我已经想出了一个笨重的解决这一看，虽然偶尔出现故障时，地缘codeR结果截断后code。
我应该使用像 jQuery的Deferred对象来解决这个问题？
VAR地理codeR;
VAR地图;
VAR信息窗口
变种迭代= 0;
geosearch =新的Array（）;功能下降（）{
对于（VAR I = 0; I＆LT; schools.length;我++）{
的setTimeout（函数（）{//延迟添加到prevent被扼杀
addMarker（）;
迭代器++;
}，我* 1000）;
}
}功能addMarker（）{
地址=学校[迭代器] .addresses [0] .address.zip;
geosearch [地址] =学校[迭代器]; //这是我如何跟踪初始请求 地理coder.geo code（{'地址'：地址}，功能（结果状态）{
VAR学校= geosearch结果[0] .address_components [0] .short_name] //加载与初始请求，其中只有后code完全相匹配的工作相关的学校 - 笨重！ 如果（状态== google.maps.Geo coderStatus.OK）{ //每个学校都有标签，我想是否存在某些标记以设置标记
如果（$ .inArray（D，school.tags）大于0）{
VAR图像='map_markers / brown_MarkerD.png';
}否则如果（$ .inArray（C，school.tags）大于0）{
VAR图像='map_markers / red_MarkerC.png';
}否则如果（$ .inArray（B，school.tags）大于0）{
VAR图像='map_markers / yellow_MarkerB.png';
}否则如果（$ .inArray（'A'，school.tags）0）{
VAR图像='map_markers / green_MarkerA.png';
}其他{
VAR图像='map_markers / blue_MarkerZ.png';
} //标记添加到地图上，使用效果
VAR的标记=新google.maps.Marker（{
地图：地图，
位置：结果[0] .geometry.location，
拖动：假的，
图标：图像，
影子：http://www.google.com/mapfiles/arrowshadow.png'，
动画：google.maps.Animation.DROP
}）; //添加上标记有在听，当点击该出现弹出框
google.maps.event.addListener（标记，'点击'，（功能（标记，学校）{
返回功能（）{
infowindow.setContent（
'＆LT; A HREF =https://vitalcpd.highrisehq.com/companies/'+school.id+'目标=_空白＆GT;'+ school.name +'＆LT; / A＆GT;'
+'＆LT;地址＆gt;
+ school.addresses [0] .address.street +'＆LT; BR /＆GT;'
+ school.addresses [0] .address.city +'＆LT; BR /＆GT;'
+ school.addresses [0] .address.state +'＆LT; BR /＆GT;'
+ school.addresses [0] .address.zip +'＆LT; BR /＆GT;'
+ school.addresses [0] .address.country +'＆LT; BR /＆GT;'
+'＆LT; /地址＆gt;'）;
infowindow.open（地图，标记）;
}
}）（标记，学校））; }其他{
的console.log（*未找到：+状态）;
}
}）;
}功能INITIALISE（）{
地理codeR =新google.maps.Geo codeR（）;
信息窗口=新google.maps.InfoWindow（）;
VAR经纬度=新google.maps.LatLng（54.82659788452641，-3.417279296874991）;
VAR的MapOptions = {
变焦：6，
中心：经纬度，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
}
地图=新google.maps.Map（的document.getElementById（map_canvas的）的MapOptions）; 下降（）; //遍历学校添加标记
}
我正经历着这里的问题只是一个范围问题，特别是我引用在 addMarker学校的路上（）功能。而不是学校内引用学校使用全局迭代器变量数组，我不是通过在这所学校，这样一来正确的办学始终在这篇范围内创建的回调引用。
VAR地理codeR;
VAR地图;
VAR信息窗口
变种迭代= 0;功能下降（）{
对于（VAR I = 0; I＆LT; schools.length;我++）{
的setTimeout（函数（）{
addMarker（学校[迭代器]）; //在学校作为参数传递
迭代器++;
$（'＃current_school）文本（迭代器）。 //取了这一点addMarker的（）
}，我* 1000）;
}
}功能addMarker（学校）{
地理coder.geo code（{'地址'：school.addresses [0] .address.zip}，功能（结果状态）{
... //从这里胆保持不变
}）;
}
I have a list of schools that I want to plot on a Google Map. I'm using Google's Geocoding Service to lookup the lng/lat for a given postcode, upon successfully retrieving this information I want to drop a marker, together with adding the appropriate event listener that opens an infobox when a given marker is clicked.
When I make a request to the geocoder it's in the context of a school, when I receive a callback I lose this context. You'll see from code below that I've come up with a clunky solution to this, although it fails occasionally when the geocoder results truncate the postcode.
Should I be using something like jQuery's Deferred Object to solve this issue?
var geocoder;
var map;
var infowindow
var iterator = 0;
geosearch = new Array();
function drop() {
for (var i = 0; i < schools.length; i++) {
setTimeout(function() { // delay added to prevent being throttled
addMarker();
iterator++;
}, i * 1000);
}
}
function addMarker() {
address = schools[iterator].addresses[0].address.zip;
geosearch[address] = schools[iterator]; // this is how I'm keeping track of initial request
geocoder.geocode( { 'address': address }, function(results, status) {
var school = geosearch[results[0].address_components[0].short_name]; // loading the school associated with the initial request, which only works if the postcode completely matches up - clunky!
if (status == google.maps.GeocoderStatus.OK) {
// each school has tags, I want to set a marker if certain tags exist
if ($.inArray('D', school.tags) > 0) {
var image = 'map_markers/brown_MarkerD.png';
} else if ($.inArray('C', school.tags) > 0) {
var image = 'map_markers/red_MarkerC.png';
} else if ($.inArray('B', school.tags) > 0) {
var image = 'map_markers/yellow_MarkerB.png';
} else if ($.inArray('A', school.tags) > 0) {
var image = 'map_markers/green_MarkerA.png';
} else {
var image = 'map_markers/blue_MarkerZ.png';
}
// add the marker to the map, using result
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: false,
icon: image,
shadow: 'http://www.google.com/mapfiles/arrowshadow.png',
animation: google.maps.Animation.DROP
});
// adds listening on marker so that popup box appears when clicked
google.maps.event.addListener(marker, 'click', (function(marker, school) {
return function() {
infowindow.setContent(
'<a href="https://vitalcpd.highrisehq.com/companies/'+school.id+'" target="_blank">'+school.name+'</a>'
+'<address>'
+school.addresses[0].address.street+'<br />'
+school.addresses[0].address.city+'<br />'
+school.addresses[0].address.state+'<br />'
+school.addresses[0].address.zip+'<br />'
+school.addresses[0].address.country+'<br />'
+'</address>');
infowindow.open(map, marker);
}
})(marker, school));
} else {
console.log("* NOT found: " + status);
}
});
}
function initialise() {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(54.82659788452641,-3.417279296874991);
var mapOptions = {
zoom: 6,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
drop(); // loops through schools to add marker
}
The problem I was experiencing here was just a questions of scope, and in particular the way that I was referencing the school within the addMarker() function. Rather than referencing the school within the schools array using the global iterator variable, I instead pass in this school, this way the correct school is always referenced on the callback that is created within this scope.
var geocoder;
var map;
var infowindow
var iterator = 0;
function drop() {
for (var i = 0; i < schools.length; i++) {
setTimeout(function() {
addMarker(schools[iterator]); // pass in the school as an argument
iterator++;
$('#current_school').text(iterator); // taken this out of addMarker()
}, i * 1000);
}
}
function addMarker(school) {
geocoder.geocode( { 'address': school.addresses[0].address.zip }, function(results, status) {
... // the inners from here remain the same
});
}
这篇关于使用谷歌地图API V3地理编码 - 链接原请求的响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
