gpt4 book ai didi

javascript - 必应 map : Two Maps on webpage

转载 作者:行者123 更新时间:2023-11-28 04:59:53 27 4
gpt4 key购买 nike

我尝试在同一网页上显示两个 Bing map ,但我的代码仅显示第二个 map (请参阅下面的代码)。

我已经尝试过使用异步( <body> 末尾的脚本)和同步( <head> 内的脚本)选项,但我遇到了相同的错误。

知道如何修复它吗?欣赏它!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id='printoutPanel'></div>
<h1>Map 1: </h1>
<div id='myMap' style='width: 30vw; height: 30vh;'></div>

<h1>Map 2:</h1>
<div id='myMap2' style='width: 30vw; height: 30vh;'></div>


<script type='text/javascript'>
function loadMapScenario() {
var loc1 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

var navigationBarMode1 = Microsoft.Maps.NavigationBarMode;
var map1 = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'My Bing Maps Key',
navigationBarMode: navigationBarMode1.compact, //uncomment to show/hide compact navigation bar
center: loc1,
zoom: 16,
});
}
</script>

<script type='text/javascript'>
function loadMapScenario() {
var loc2 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

var navigationBarMode2 = Microsoft.Maps.NavigationBarMode;
var map2 = new Microsoft.Maps.Map(document.getElementById('myMap2'), {
credentials: 'My Bing Maps Key',
navigationBarMode: navigationBarMode2.compact, //uncomment to show/hide compact navigation bar
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: loc2,
zoom: 16,
});
}
</script>

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>

</body>

最佳答案

如果有多个同名函数,最后定义的函数将覆盖其他函数。

您可以将代码合并到一个函数中,这样您就可以在脚本回调中创建两个映射:

<script>
function loadMapScenario() {
var loc1 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

var navigationBarMode1 = Microsoft.Maps.NavigationBarMode;
var map1 = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'BING MAPS KEY',
navigationBarMode: navigationBarMode1.compact, //uncomment to show/hide compact navigation bar
center: loc1,
zoom: 16,
});

var loc2 = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

var navigationBarMode2 = Microsoft.Maps.NavigationBarMode;
var map2 = new Microsoft.Maps.Map(document.getElementById('myMap2'), {
credentials: 'BING MAPS KEY',
navigationBarMode: navigationBarMode2.compact, //uncomment to show/hide compact navigation bar
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: loc2,
zoom: 16,
});
}
</script>

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>

由于两个 map 都使用相同的坐标和 NavigationBarMode,因此您无需复制这些变量,这样可以节省几行代码:

<script>
function loadMapScenario() {
var loc = new Microsoft.Maps.Location(48.777677, 9.180600); //Schloßplatz coords

var navigationBarMode = Microsoft.Maps.NavigationBarMode;

var map1 = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'BING MAPS KEY',
navigationBarMode: navigationBarMode.compact,
center: loc1,
zoom: 16,
});

var map2 = new Microsoft.Maps.Map(document.getElementById('myMap2'), {
credentials: 'BING MAPS KEY',
navigationBarMode: navigationBarMode.compact, // use 'navigationBarMode' instead of 'navigationBarMode2'
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
center: loc, // use 'loc' instead of 'loc2'
zoom: 16,
});
}
</script>

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script>

关于javascript - 必应 map : Two Maps on webpage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42214055/

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