11

我看到很多用户都问过这个问题,但实际上仍然没有关于如何在没有钥匙的情况下使用谷歌地图的示例的答案(所有答案都是对另一个网页的引用)。

我已经设法在没有密钥的情况下使用谷歌地图,但我只设法获得了一张静态地图。你知道这个动态是怎么做的吗?

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?center= -32.0000343 ,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true

当我说“动态地图”时,我的意思是这样的:https ://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple

4

5 回答 5

18

这对我有用。我在本地主机上试过了。stackoverflow 中的其他各种解决方案都没有帮助。

<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 />

通过这种方式,我们可以根据我们在后端输入的地址动态生成地图。

于 2014-07-10T09:21:04.613 回答
15

正如@geocodezip 所说,您正在寻找Google Maps Javascript v3

这是使用它的简单示例(从我的旧答案中挑选),这不需要任何键。

HTML:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>

CSS:

#map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }

Javascript:

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: "<B>Skyway Dr</B>"
  });

   //=====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:每项服务每天最多加载 25,000 个地图。

这包括:


  1. 由网页或应用程序加载时使用 Maps JavaScript API(V2 或 V3)显示地图;
  2. 未显示地图的网页或应用程序使用 Maps JavaScript API(V2 或 V3)显示街景全景图;
  3. 加载 Maps API for Flash 的 SWF 由网页或应用程序加载;或者
  4. 来自静态地图 API 的地图图像的单个请求。
  5. 从 Street View Image API 发出一个全景图像请求。

从您的评论中,

我也尝试过使用canvas,它不起作用。

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

但这对div元素很有效。

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

更新了 JSFiddle

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

于 2013-08-08T16:17:55.070 回答
3

我在 plunker 上举个例子

http://plnkr.co/T4eULTnKbWCKlabPI4pu

和代码

<!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>
于 2015-04-16T09:01:16.407 回答
1

使用Google Maps Javascript API v3文档中有很多很好的示例

于 2013-08-08T16:11:54.053 回答
0

从安卓手机试试

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

将此添加到您的锚链接

于 2014-02-03T17:14:44.583 回答