Maptiler Google API无法工作
我看过很多关于这个主题的文章，但我似乎就是找不到一个嵌入在我网站上的谷歌地图的修复方法。它是一个iframe，它引用使用maptiler程序创建的单独托管的html文件。嵌入会产生可怕的“糟糕！出了问题”的灰色框……尽管所需的地图确实显示了大约半秒。java控制台抱怨“没有api密钥”……我创建了各种各样的Google Maps Javascript API密钥，有时使用http规则，有时不使用。毫无办法。
html文件显示在下面。(我故意把钥匙忘在外面了。)
<!DOCTYPE html>
<html>
<head>
<title>3rd</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0;
width: 100%; height: 100%; font-family: Trebuchet MS, Trebuchet, Arial, sans-serif; }
#map { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 15px; overflow: auto; }
#footer { position: absolute; bottom: 0px; left: 0px; width:100%; height: 12px; overflow: hidden; }
@media screen and (max-width: 600px) {
#map { top:0px; left:0px; width:100%; height:100%;}
}
body { background: #f4f4f4;}
#header { background: #fff; box-shadow: 0 1px 3px #CCC; border: 1px solid #ccc; }
#header h1 { padding:7px 10px; margin:0; font-size: 28px; }
#map { border: 1px solid #ccc; box-shadow: 0 1px 3px #CCC; background-color: #DEDCD7;}
#footer { text-align:center; font-size:9px; color:#606060; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
#map {
height:expression(document.body.clientHeight-35); /* 10+10+15=35 */
width:expression(document.body.clientWidth-20); /* 10+10=20 */
}
</style>
<![endif]-->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?MY_KEY_HERE&sensor=true"></script>
<!-- Get your Google Maps API Key: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#introduction-->
<!--<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=MY_Key_HERE"></script>-->
<script type="text/javascript">
var map;
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(44.890044, -75.192903),
new google.maps.LatLng(44.909499, -75.165437));
var mapMinZoom = 13;
var mapMaxZoom = 17;
var maptiler = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var proj = map.getProjection();
var z2 = Math.pow(2, zoom);
var tileXSize = 256 / z2;
var tileYSize = 256 / z2;
var tileBounds = new google.maps.LatLngBounds(
proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
);
var y = coord.y;
var x = coord.x >= 0 ? coord.x : z2 + coord.x
if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
return zoom + "/" + x + "/" + y + ".png";
else
return "https://www.maptiler.com/img/none.png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
opacity: 1.0
});
function init() {
var opts = {
tilt:0,
streetViewControl: false,
center: new google.maps.LatLng(44.899771, -75.179170),
zoom: 13
};
map = new google.maps.Map(document.getElementById("map"), opts);
map.setMapTypeId('satellite');
map.overlayMapTypes.insertAt(0, maptiler);
}
</script>
</head>
<body onload="init()">
<div id="footer">Generated with <a href="https://www.maptiler.com/">MapTiler</a></div>
<div id="map"></div>
</body>
</html>回答 2
Stack Overflow用户
发布于 2018-01-23 21:18:29
最新的Google Maps API需要每个已发布网站的个人API密钥-这是Google Maps团队做出的决定。
您必须生成您自己的API密钥，并在模板中使用它来使您的地图正常工作。有关更多信息，请访问Google Maps API页面：
要从Google开发人员控制台获取密钥，请访问以下链接：
在将Google Maps Javascript Library粘贴到超文本标记语言的页眉中作为参数进行查询时，将使用该密钥(将YOUR_API_KEY替换为您自己生成的密钥)：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer>
</script>从MapTiler 7.0开始，我们将此键的字段添加到MapTiler的设置中。MapTiler将使用Google Maps API自动将此密钥添加到预先生成的模板中，以节省您的时间和精力。
这是来自MapTiler HowTo的转载：http://www.maptiler.com/how-to/google-maps-api/
Stack Overflow用户
发布于 2018-01-28 08:46:21
因此，解决方案是在Google Cloud控制台中创建另一个项目和另一个API密钥，我仔细地在我的网站上验证了这一点。我指定了该站点的https://版本，以及其他版本，它起作用了。我以前验证过这个站点，但可能没有https://版本。这可能是个巧合。
https://stackoverflow.com/questions/48388701
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号