关于javascript：如何在没有密钥的情况下使用Google地图？


How to use Google Maps without a key? (from static to dynamic with URL)

我看到很多用户都问过这个问题，但事实上仍然没有答案，比如如何使用没有密钥的谷歌地图(所有答案都是对其他网页的引用)。

我已经设法使用了谷歌地图没有钥匙，但我只设法得到一个静态地图。你知道这个动力是怎么产生的吗？

1
2
3
4
5
var img = new Image();

img.src ="http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true";

return img; //OR document.body.appendChild(img);

即使您只需单击此链接，也可以看到地图，如果更改"URL属性"，则可以"编辑"地图：http://maps.googleapis.com/maps/api/staticmap？中心=-32.0000343，-58.0000343&zoom=5&size=300x300&sensor=true&visualrefresh=true

当我说"动态地图"时，我指的是这样的东西：https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple

相关讨论

这对我很有效。我在本地主机上尝试过。StackOverflow中的其他各种解决方案都没有起到作用。

1
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=<?php echo urlencode($address); ?>&amp;output=embed"></iframe><br />

这样，我们可以根据在后端输入的地址动态生成映射。

相关讨论

正如@geocodezip所说，您正在寻找谷歌地图javascript v3。

下面是使用它的简单示例(从我以前的答案中选择)，它不需要任何键。

HTML：

1
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">

CSS：

1
2
3
4
5
#map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }

Javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function initialize() {
    var myLatlng = new google.maps.LatLng(43.565529, -80.197645);
    var mapOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     //=====Initialise Default Marker    
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'marker'
     //=====You can even customize the icons here
    });

     //=====Initialise InfoWindow
    var infowindow = new google.maps.InfoWindow({
      content:"Skyway Dr"
  });

   //=====Eventlistener for InfoWindow
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

我做了一个简单的小提琴供你参考。

希望你有个主意。

因为你对使用密钥不感兴趣，所以要注意限制。

google maps javascript api：每天最多可加载25000个地图服务。

这包括：

  • 当由网页或应用程序加载；
  • 使用maps javascript api(v2)显示街景全景图或v3)通过未显示地图；
  • 通过网页或申请；或
  • 对于静态映射API中的映射图像，只发出一个请求。
  • 只需从街景中请求全景图像图像API。

    • 从你的评论来看，

    我也试过用canvas，但没用。

    1
     var mapCanvas = document.createElement("canvas");

    但这对div元素很有效。

    1
    2
    3
    var mapCanvas = document.createElement("div");
    mapCanvas.style.width ="200px";
    mapCanvas.style.height ="200px";

    更新的jsiddle

    不要忘记设置宽度和高度属性。

    相关讨论

    我在给普朗克举个例子

    http://plnkr.co/t4eultnkbwcklabpi4pu

    代码

    1
    2
    3
    4
    5
    6
    7
    8
    <!DOCTYPE html>
    <html>
    <body>

    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=London&amp;ie=UTF8&amp;&amp;output=embed"></iframe><br />

    </body>
    </html>
    相关讨论

    使用谷歌地图javascript api v3(文档中有很多很好的例子)

    相关讨论

    在Android手机上试试

    1
    href="google.streetview:cbll=51.470305,-0.183842&cbp=1,10,,0,2.0&mz=mapZoom"

    将此添加到锚链接