【发布时间】：2020-12-19 00:12:48
【问题描述】：
为了这个论点，我在这里有两个地图回调：
function initMap() {
// The location of Intersection One
var intersection_one = {lat: [lat1], lng: [lng1]};
var image = 'assets/images/map_icon_marker.ico';
// The map, centered at Intersection One
var map = new google.maps.Map(
document.getElementById('map_one'), {zoom: 18, center: intersection_one, mapTypeId: 'satellite'});
// The marker, positioned at Intersection One
var marker = new google.maps.Marker({position: intersection_one, map: map, icon: image});
map.addListener("center_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(() => {
map.panTo(marker.getPosition());
}, 3000);
});
// Allow users to click on the map to open in a new window
google.maps.event.addListener(map, "click", function(){
window.open("https://www.google.com/maps/@[lat/lng1m/data=")
});
// Allow users to click on the marker to open in a new window
google.maps.event.addListener(marker, "click", function(){
window.open("https://www.google.com/maps/@5[lat/lng1m/data=data=")
});
}
function initMap() {
// The location of Intersection Two
var intersection_two = {lat: [lat2], lng: [lng2]};
var image = 'assets/images/map_icon_marker.ico';
// The map, centered at Intersection Two
var map2 = new google.maps.Map(
document.getElementById('map_two'), {zoom: 19, center: intersection_two, mapTypeId: 'satellite'});
// The marker, positioned at Intersection One
var marker2 = new google.maps.Marker({position: intersection_two, map: map2, icon: image});
map.addListener("center_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(() => {
map.panTo(marker2.getPosition());
}, 3000);
});
// Allow users to click on the map to open in a new window
google.maps.event.addListener(map2, "click", function(){
window.open("https://www.google.com/maps/@[lat/lng1]z")
});
// Allow users to click on the marker to open in a new window
google.maps.event.addListener(marker2, "click", function(){
window.open("https://www.google.com/maps/@[lat/lng1]zz")
});
}
我知道这种方式行不通，但我想知道如何将两个 setTimeOut 函数（使地图居中）和两个允许单击地图并在新窗口中打开的 addListener 函数链接在一起？
当我像这样将两个 setTimeout 函数串在一起时（完整代码）：
function initMap() {
// The location of Intersection One
var intersection_one = {lat: 55.777034, lng: 37.583926};
var intersection_two = {lat: -33.7386872, lng: 150.9154922};
var image = 'assets/images/map_icon_marker.ico';
// The map, centered at Intersection One
var map = new google.maps.Map(
document.getElementById('map_one'), {zoom: 18, center: intersection_one, mapTypeId: 'satellite'});
var map2 = new google.maps.Map(
document.getElementById('map_two'), {zoom: 19, center: intersection_two, mapTypeId: 'satellite'});
// The marker, positioned at Intersection One
var marker = new google.maps.Marker({position: intersection_one, map: map, icon: image});
map.addListener("center_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(() => {
map.panTo(marker.getPosition());
}, 3000);
});
var marker2 = new google.maps.Marker({position: intersection_two, map: map2, icon: image});
map.addListener("center_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(() => {
map2.panTo(marker2.getPosition());
}, 3000);
});
// Allow users to click on the map to open in a new window
google.maps.event.addListener(map, "click", function(){
window.open("https://www.google.com/maps/@55.7769838,37.5835604,81m/data=!3m1!1e3")
});
// Allow users to click on the marker to open in a new window
google.maps.event.addListener(marker, "click", function(){
window.open("https://www.google.com/maps/@55.7769838,37.5835604,81m/data=!3m1!1e3")
});
}
我可以让第一张地图重新居中，但不能让第二张地图重新居中，除非第一张地图重新居中。因此，如果用户只是移动第二张地图，除非他们移动第一张地图，否则它不会重新居中。
【问题讨论】：
-
你不能有两个同名的函数。 Using initMap and initAutocomplete on same html page google maps 的可能重复项
-
是的，我知道我不能使用相同的名称——上面的脚本是为了论证。我可以有多个地图，只需使用这些变量 map2 等。这不是问题。问题是让 setTimeout 和 addListener 函数在两个或多个地图上工作。制作地图很容易。
-
您在 javascript 控制台中遇到什么错误？
-
在您的第二个函数中，您可能希望在
setTimeout函数中引用map2（对我来说看起来像是错字，或者是复制/粘贴错误）。请提供一个minimal reproducible example 来演示实际问题。 -
您在 javascript 控制台中遇到什么错误？该死的......我在检查之前把它全部解开了（我忘了检查控制台）。但是当我尝试链接 setTimeout 和 Listener 时，地图根本没有加载（我在这里搜索了如何做的想法）。或者，如果地图已加载，它们将变得无法点击且无法重新居中。