Google Maps 基本



  • 创建一个基本的谷歌地图

    此示例定义了以中国北京市为中心的 Google 地图:
    <!DOCTYPE html>
    <html>
    <body>
      <h1>我的第一个谷歌地图</h1>
      <div id="map" style="width:400px;height:400px;background:green"></div>
      <script>
        function myMap() {
          var mapOptions = {
              center: new google.maps.LatLng(39.9, 116.39),
              zoom: 10,
              mapTypeId: google.maps.MapTypeId.HYBRID
          }
          var map = new google.maps.Map(document.getElementById("map"), mapOptions);
        }
      </script>
      <script src="https://maps.googleapis.com/maps/api/js?callback=myMap&key=AIzaSyCUFl_HZrZuL7W7IsF2ZXxI6m8CRTYfpzI"></script>
    </body>
    </html>
    
    尝试一下
    本页面的其余部分将逐步说明上述示例。
  • 地图容器和大小

    该地图需要一个HTML元素来保存该地图:
    <div id="map" style="width:400px;height:400px;background:green"></div>
    
    还要设置地图的大小。
  • 创建一个函数来设置地图属性

    该地图需要一个HTML元素来保存该地图:
    function myMap() {
      var mapOptions = {
          center: new google.maps.LatLng(39.9, 116.39),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.HYBRID
      }
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    }
    
    示例说明:
    • 所述的MapOptions变量定义为地图的配置属性。
    • center 属性指定要显示在地图中心(使用纬度和经度坐标)。
    • zoom 属性指定地图缩放级别(尝试用缩放级别进行试验)。
    • mapTypeId 属性指定地图类型来显示。支持以下地图类型:ROADMAP,SATELLITE,HYBRID和TERRAIN。
    • 这一行:var map = new google.maps.Map(document.getElementById("map"),mapOptions); 使用传递的参数(mapOptions)在id ="map"的<div>元素内创建一个新映射。
    • 这一行:<script src="https://maps.googleapis.com/maps/api/js?callback=myMap&key=AIzaSyCUFl_HZrZuL7W7IsF2ZXxI6m8CRTYfpzI"></script>,引入谷歌地图JS API密钥;谷歌地图希望在加载API时在 key 参数中找到 API 密钥
  • 多个地图

    以下示例定义了四种具有不同地图类型的地图:
    var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
    var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
    var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
    var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);