如何使用Javascript加载Google静态地图图片

sot*_*ips 3 javascript google-maps

现在,我可以使用此网址成功申请Google静态地图图片:

http://maps.google.com/staticmap?center=37.687,-122.407&zoom=8&size=450x300&maptype=terrain&key=[my key here]&sensor=false
Run Code Online (Sandbox Code Playgroud)

但是,第二个我使用JQuery或任何直接的javascript将图像的src设置为上面的url,Google传回错误400:

"您的客户发出了错误或非法的请求."

我已经读过这通常是因为密钥不正确,但我的密钥显然已被传递.

这就是我动态设置图像的方式:

document.getElementById('my-image-id').src = "http://maps.google.com/staticmap?center=37.687,-122.407&zoom=8&size=450x300&maptype=terrain&key=[my key here]&sensor=false"
Run Code Online (Sandbox Code Playgroud)

我用正确的密钥替换了[我的密钥],但它仍然不起作用.当我通过浏览器请求相同的URL时,没关系.我已经确认正确的推荐人也会被通过.

有任何想法吗?

lan*_*nce 8

这段代码是否适合你(它对我有用 - 一定要插入你的密钥)?

<html>
<head>
<script language="javascript">
    function swap() {
        document.getElementById('my-image-id').src = "http://maps.google.com/staticmap?center=37.687,-122.407&zoom=8&size=450x300&maptype=terrain&key=&sensor=false"
    }
</script>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="450" height="300" onClick="swap();" id="my-image-id" />
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

  • 好的,所以它不起作用的原因是我使用了错误的API密钥.显然,当您在本地测试时,您不需要API密钥,因此它没有失败.在生产中尝试时,我使用了错误的API密钥并且*失败了.谢谢你的帮助! (2认同)