我正在尝试向生成的 Google map 添加折线。折线的坐标是使用 jQuery(getJSON 函数)从我的网络服务器上的一个 JSON 文件中获取的。但是,我在回调方面遇到了麻烦。我在一个单独的 JavaScript 文件中定义了三个函数,它们是:
function initMap(callback) {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat: 34.397, lng: 150.644},
scrollwheel: false,
zoom: 2
});
callback();
}
.
function setPath(callback) {
$.getJSON('./expOneActivityData.json',
function (data) {
//Some looping contstruct to navigate through my JSON file.
}
})
callback();
};
.
function addPath() {
var trekLine = new google.maps.Polyline({
path: expeditionCoordinates,
geodisc: true,
stokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
trekLine.setMap(map);
}
expeditionCoordinates 是一个数组,每个元素都是一个具有纬度和经度属性的对象。这被声明为全局变量,值初始化发生在 setPath() 的循环中。
在我的 HTML 文件中,我有:
<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap">
当我尝试在脚本标记中将 initMap 替换为 initMap(setPath(addPath)) 时,我收到来自 Google 的 400 Bad 请求。当然,在脚本标签中只有“callback=initMap”会给出:
TypeError: callback is not a function
与 initMap 定义中的 callback() 一致。
那么如何将函数传递给 googleapis,函数本身也有回调? (顺便说一句,我的循环构造很好)。我尝试将“延迟”添加到 googleapi 脚本标签,以及链接到我的 JavaScript 文件的标签。我删除了所有回调的东西,只执行了循环。我希望 expeditionCoordinates 数组能够在执行 googleapi 脚本标记之前完成初始化,尽管这也不起作用( map 仍在加载,只是没有折线)。
我是 Javascript 的新手,它是异步的,但我确实了解它们的工作原理,并且已经在一周左右的时间里成功地在基础级别上使用它们。
(这实际上引出了一个附带问题。到目前为止,我只处理过一个回调。我希望是这样的:
initMap(setPath)
当它的定义作为参数传递时,因为 setPath 没有附加 (),因此不会立即执行。尽管向 setPath 添加了一组括号,因为它也需要回调 (addPath),这是否意味着它会立即执行?)
最佳答案
所提供的示例存在几个问题:
1) 加载 Google Maps API 时,callback
参数接受
回调 函数名称 其中函数本身应该有
以下签名:
function initMap() {
//...
}
在哪里
<script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap" async defer></script>
Only parameter-less callback function could be specified this way.
2) 自 jQuery.getJSON()
默认情况下是 async
并且您正在传递函数回调,setPath
函数的实现应该如下所示:
function setPath(callback) {
$.getJSON('./expOneActivityData.json',
function (data) {
callback(data);
}
);
};
工作示例
function initMap() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: { lat: 34.397, lng: 150.644 },
scrollwheel: false,
zoom: 2
});
setPath(function(data) {
addPath(map,data);
});
}
function setPath(callback) {
$.getJSON('https://gist.githubusercontent.com/vgrem/91ba4d694157169b112c/raw/5bdd81c6f5bdfa5ba2d0ca8d5494129b329399d8/expOneActivityData.json',
function (data) {
callback(data);
}
);
};
function addPath(map,expeditionCoordinates) {
var trekLine = new google.maps.Polyline({
path: expeditionCoordinates,
geodisc: true,
stokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
trekLine.setMap(map);
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"
async defer></script>
关于javascript - 谷歌地图 API : Setting up callbacks for adding markers/polyline,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34379664/