使用谷歌地图 Javascript版_google道路吸附-优快云博客

本文链接：https://blog.youkuaiyun.com/qduningning/article/details/44919139

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCR69jLZcjIGSw03n9_Q_ouR8tvLCHq59g&callback=initMap"
        async defer></script>
  </body>
</html>

上传到服务器，直接点击html文件貌似没法显示的，，，
结果是这样的，，，
谷歌地图

默认是被墙的，可以把https://maps.googleapis.com/maps/api/js 改成 http://maps.google.cn/maps/api/js
这样应该就可以了(http://www.erdian.net/mapdemo.html)

另外可以选择用加层的方式

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