我的网站上有多个谷歌地图实例,现在同一页面上有两个不同的谷歌地图,发生的情况是第一个有效,其他无效,现在我知道逻辑问题让我先向您展示我的代码
<script>
function initMap() {
var myLatLng = {lat: 43.6222102, lng:-79.6694881};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap"
async defer></script>
现在,当我定义一个回调方法时,它总是初始化名为的方法initMap而我想做的是可以有多个谷歌地图让我们假设initMap2我怎样才能加载它们而不需要callback method?
要在没有回调的情况下加载地图,请同步/内联加载 API(无需async defer
),然后在加载事件上调用 initMap 函数。
(Note:仅供参考:Google 将所有示例更改为使用异步加载来缩短加载时间)
(Note2:谷歌添加了一个描述同步加载的文档中的“样本”)
概念证明小提琴
代码片段:
function initMap() {
var myLatLng = {
lat: 43.6222102,
lng: -79.6694881
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<!-- added 1/21/2023 to prevent:
Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters
-->
<script>
function dummy() {}
window.dummy=dummy;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=dummy"></script>
<div id="map"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)