在谷歌地图示例中为 Ajax 调用制作一个 JavaScript 闭包
craft a javascript closure for ajax call in google map example
我有这个简化的代码，可以创建一个谷歌地图，并允许我将文本注入地图InfoWindow气泡。
但问题来了。目前函数 fnGetNewTextForInfoWindow（） 的任务是微不足道的。 但是，如果我更改fnGetNewTextForInfoWindow（）的内容以调用jquery .ajax查询，这需要几百毫秒。这会导致数据延迟。 我认为需要一个"闭包"函数，但在保持调用函数的位置的上下文时遇到问题。需要指导。谢谢
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas, #side-bar {
height: 500px;
width: 600px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// "use strict";
// variable to hold a map
var map;
// variable to hold current active InfoWindow
var activeInfoWindow ;
// ------------------------------------------------------------------ //
// initialize function
// ------------------------------------------------------------------ //
function initialize() {
// map options
var mapOptions = {
zoom : 10,
draggable: true,
center : new google.maps.LatLng(44.9600, -93.1000),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// define two Google Map LatLng objects representing geographic points
var stPaul = new google.maps.LatLng(44.9522,-93.0892);
var minneapolis = new google.maps.LatLng(44.9792,-93.2662);
// place two markers
fnPlaceMarkers(stPaul,"St Paul");
fnPlaceMarkers(minneapolis,"Minneapolis");
}
// -------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------- //
function fnPlaceMarkers(myLocation,myCityName){
var marker = new google.maps.Marker({
position : myLocation
});
// Renders the marker on the specified map
marker.setMap(map);
// create an InfoWindow
var infoWnd = new google.maps.InfoWindow();
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '</div>');
// add listener on InfoWindow - close last infoWindow before opening new one
google.maps.event.addListener(marker, 'click', function() {
//Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// get latest text
var newText = fnGetNewTextForInfoWindow();
infoWnd.setContent(newText);
// Open InfoWindow
infoWnd.open(map, marker, newText);
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd;
});
}
function fnGetNewTextForInfoWindow(){
var newText = $('#idSomeNewText').val();
return newText;
}
// ---------------------------------------------------------- //
// initial load
// -----------------------------------------------------------//
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Enter Some text to insert in marker:
<input id='idSomeNewText' type="text" name="firstname" value="test value">
<br/> <br/>
<div id="map-canvas"></div>
<br/>
<br/>
</body>
</html>
-----添加：fnGetNewTextForInfoWindow（） 看起来像这样...
function fnGetNewTextForInfoWindow() {
$.ajax({
type: "POST",
dataType : 'json',
data: { key1: "value"} ,
url: "myProgram",
success: function(data) {
// I need this value to display in infoWindow
var newText = new google.maps.LatLng(markerData[i]['newStatus'], markerData[i]['newOwner']);
}, // end success
error: function (jqXHR, textStatus, errorThrown) {
// something bad happened
}
}); // end ajax
};
---------编辑 - 根据贸泽的修订
// -------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------- //
function fnPlaceMarkers(myLocation,myCityName){
var marker = new google.maps.Marker({
position : myLocation
});
// Renders the marker on the specified map
marker.setMap(map);
// create an InfoWindow
var infoWnd = new google.maps.InfoWindow();
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '</div>');
// add listener on InfoWindow - close last infoWindow before opening new one
google.maps.event.addListener(marker, 'click', function() {
//Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// get latest text
// var newText = fnGetNewTextForInfoWindow();
// infoWnd.setContent(newText);
// pass infoWnd
fnGetNewTextForInfoWindow(infoWnd);
// Open InfoWindow
// infoWnd.open(map, marker, newText);
// Store new open InfoWindow in global variable
//activeInfoWindow = infoWnd;
});
}
// ---------------------------------------------------------- //
//
// -----------------------------------------------------------//
function fnGetNewTextForInfoWindow(infoWindow){
var infoWnd = infoWindow
//$.ajax( "data.xml" )
$.ajax( "example.php" )
.done(function(data) {
var newText = data; // data from the jQuery ajax call
infoWnd.setContent(newText); // set the content
infoWnd.open(map, marker, newText); //
})
}
如果你有一个jQuery Ajax调用（你需要自己填写它）。这只是一个基本的（基本的）Ajax调用：
function fnGetNewTextForInfoWindow(infoWindow){
var infoWnd = infoWindow
$.ajax( "example.php" )
.done(function(data) {
var newText = data; //data from the jQuery ajax call
infoWnd.setContent(newText); //set the content
infoWnd.open(map, marker, newText);
})
}
要调用您的调用，请替换以下行：
var newText = fnGetNewTextForInfoWindow();
infoWnd.setContent(newText);
跟
fnGetNewTextForInfoWindow(infoWnd);
这是通过将对象infoWnd发送到 fnGetNewTextForInfoWindow 函数来实现的。我们在同一作用域中设置 Ajax 调用，因此我们可以在 done 方法中重用 infoWnd 对象。
相关文章：
- 使用Google闭包编译器包含一个Ecmascript 6类
- 在谷歌地图示例中为 Ajax 调用制作一个 JavaScript 闭包
- 闭包中的本地变量从外部更改.这是一个javascript错误，或者我做错了什么
- 将一个简单的函数声明形成JavaScript中的闭包
- 递增并存储一个“;私人的“;使用闭包的变量
- 为什么需要在这个闭包中创建一个变量
- 这是闭包的一个很好的例子吗?
- 为什么允许通过原型继承访问另一个闭包范围内的私有变量
- 为什么这不是一个javascript闭包
- JavaScript 中的闭包:再举一个例子
- 这是一个JavaScript闭包错误吗?
- 闭包的意外行为:回调保存最后一个值
- Javascript - 在闭包中使用函数构造函数是一个坏主意吗?
- 我们是否可以使用谷歌闭包创建一个带有复选框和组合框的对话框
- 向Jquery$.each传递一个闭包
- 我如何告诉谷歌闭包编译器不要删除一个变量
- Is回调函数始终是一个闭包
- ES2015导出的类是否创建了一个闭包
- 我如何把所有这1200+行自定义javascript到一个闭包，所以没有全局变量
- 一个闭包中的jquery tmpl
