gpt4 book ai didi

javascript - 添加 API 后显示灰色框的 Google map 无法正常工作

转载 作者:太空宇宙 更新时间:2023-11-04 09:19:56 24 4
gpt4 key购买 nike

谷歌地图显示灰色框或有时什么都不显示/白色我用谷歌搜索了一些链接并尝试了他们的方法,但对我不起作用。任何解决方案?我尝试更改缩放比例但仍然无法正常工作控制台没有显示错误

<head>    
<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;hl=en&amp;key=GOOGLE_GENERATED_API&amp;sensor=true"type="text/javascript"></script>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(31.4856,74.3406);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 8};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
content: "Welcome to Ali Institute of Education"
});
infowindow.open(map,marker);
}
</script>



</head>

<body onload="myMap()">

<?php include '/layout/header.php';?>

<!-- Contact Us Content -->
<div class="container-fluid">



<div id="map" style="width: 800px; height: 400px; overflow:visible;">&nbsp;</div>
</div>
</body>

最佳答案

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&hl=en&key=GOOGLE_GENERATED_API&sensor=true" ></script>

<!--OR-->

<script src="https://maps.google.com/maps/api/js?file=api&amp;v=3&amp;hl=en&amp;key=GOOGLE_GENERATED_API&amp;sensor=true"></script>

在此链接上,将文本 GOOGLE_GENERATED_API 替换为您的 google api key

在我这边表现得很完美。您在浏览器 consollog 上遇到了哪个错误?您的 map API cdn 不正确。也许你得到这个错误 google is not define.google.maps.event.addDomListener (myMap);添加此行,或者您可以从正文中删除 onload 并添加此google.maps.event.addDomListener (window, 'load', myMap);

此外,我在标记上添加了点击功能。如果您有任何问题,请在评论中问我。

 
function myMap() {
var myCenter = new google.maps.LatLng(31.4856,74.3406);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 8};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
content: "Welcome to Ali Institute of Education"
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});

google.maps.event.addDomListener (myMap);
//google.maps.event.addDomListener (window, 'load', myMap);
// if you use the window load myMap You don't need onload function on body tag
}


#map{
width: 800px;
height: 400px;
overflow:visible;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp"></script>
</head>
<body onload="myMap()">
<div class="container-fluid">
<div id="map"></div>
</div>
</head>

关于javascript - 添加 API 后显示灰色框的 Google map 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41545405/

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