使用谷歌地图 Javascript版

谷歌称Map JavaScript V3版是同时为PC和移动设备开发的,使用Html5。

首先需要在 Google Console 申请KEY,创建 一个 Browser key ,简单demo就可以使用:

<!DOCTYPE html>
<html>
  <head>
    <title>Asynchronous Loading</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> function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCR69jLZcjIGSw03n9_Q_ouR8tvLCHq59g&sensor=TRUE&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

上传到服务器,直接点击html文件貌似没法显示的,,,
结果是这样的,,,
使用谷歌地图 Javascript版_第1张图片

好吧,https://mts0.googleapis.com/…被墙了。。
只好添加层了。。。

<!DOCTYPE html>
<html>
  <head>
    <title>Image map types</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>

  </head>
  <body>
    <div id="map-canvas"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCR69jLZcjIGSw03n9_Q_ouR8tvLCHq59g&sensor=TRUE&callback=initialize"/></script>
    <script>
        var moonTypeOptions = {
          getTileUrl: function(coord, zoom) {
              var normalizedCoord = getNormalizedCoord(coord, zoom);
              if (!normalizedCoord) {
                return null;
              }
              var bound = Math.pow(2, zoom);
              return 'http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x='+normalizedCoord.x+'&y='+normalizedCoord.y+'&z='+zoom+'&s=Galil';
          },
          tileSize: new google.maps.Size(256, 256),
          maxZoom: 9,
          minZoom: 0,
          radius: 1738000,
          name: 'Moon'
        };

        var moonMapType = new google.maps.ImageMapType(moonTypeOptions);

        function initialize() {
          var myLatlng = new google.maps.LatLng(0, 0);
          var mapOptions = {
            center: myLatlng,
            zoom: 1,
            streetViewControl: false,
            mapTypeControlOptions: {
              mapTypeIds: ['moon']
            }
          };

          var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
          map.mapTypes.set('moon', moonMapType);
          map.setMapTypeId('moon');
        }

        // Normalizes the coords that tiles repeat across the x axis (horizontally)
        // like the standard Google map tiles.
        function getNormalizedCoord(coord, zoom) {
          var y = coord.y;
          var x = coord.x;

          // tile range in one direction range is dependent on zoom level
          // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
          var tileRange = 1 << zoom;

          // don't repeat across y-axis (vertically)
          if (y < 0 || y >= tileRange) {
            return null;
          }

          // repeat across x-axis
          if (x < 0 || x >= tileRange) {
            x = (x % tileRange + tileRange) % tileRange;
          }

          return {
            x: x,
            y: y
          };
        }

        google.maps.event.addDomListener(window, 'load', initialize);
      </script>
  </body>
</html>

好吧,暂时没有运行起来,,在这行断掉了,,tileSize: new google.maps.Size(256, 256),
暂时没有解决。。。。。

换高德试试:
http://lbs.amap.com/api/javascript-api/example/d/0403-2/
我擦。。好给力。。。。。

demo:
http://www.erdian.net/mapdemo_amap.html

使用谷歌地图 Javascript版_第2张图片

你可能感兴趣的:(谷歌,地图)