如何使用 jQuery 创建一个简单的地图？

jQuery 是一个开源 JavaScript 库，可简化 HTML/CSS 文档（或更准确地说是文档对象模型 (DOM)）与 JavaScript 之间的交互。

什么是谷歌地图？

谷歌地图是谷歌提供的一种免费的基于网络的地图服务应用程序和技术。该应用程序提供有关地理区域、街道地图以及驾车、步行或公共交通出行的路线规划器的综合信息，可提供全球各国的卫星视图。

方法：

• HTML Google Map 可用于在网页上显示地图。可以简单地添加地图 HTML 页面。

  句法：

    
    
    
    
  Enter text
    
    
  

• 设置地图大小

  句法：

• 创建一个函数来设置地图属性

  可以通过创建函数来设置地图属性。我们必须使用位于 Google 的 JavaScript 库提供的 Google Maps API 功能。

创建地图

• 在上面的例子中，我们将使用谷歌 API 来加载谷歌地图。

  以下是获取 API 密钥所需的步骤：

  • 转到下面提到的链接
    https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&reusekey=true
  • 创建一个新项目或从现有项目中进行选择。
  • 单击继续以启用 API。
  • 在凭据页面上，获取 API 密钥（并设置 API 密钥限制）。
  • 将 URL 中 key 参数的值替换为您自己的 API 密钥
• 要自定义地图：

  var CustomOp = {
      center:new google.maps.LatLng(28.502212, 77.405603), 
      zoom:17, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  在这种情况下， CustomOp是一个包含 3 个选项的对象， center 、 zoom和maptypeid 。

  • center：该属性用于设置地图中的特定点。
  • zoom：此属性用于指定特定点的缩放级别。
  • maptypeid：该属性用于指定地图的类型。 （路线图、卫星、混合、地形）

要创建地图对象，我们将使用以下代码：

var map = new google.maps.Map(document.getElementById("DivID"), CustomOp);

要自定义 Google 地图，提供了四种类型的地图。

• ROADMAP：这种类型的地图显示特定区域的街景。它是默认类型映射。
• 卫星：这种类型的地图显示特定区域的卫星图像。
• HYBRID：这种类型的地图显示了特定区域的主要街道。
• 地形：这种类型的地图显示地形和植被。

示例 1：路线图

  

    
        Google Maps | Types
    
  
    
    
    
         
    
        function GFG() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603), 
                zoom:17, 
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
               
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    

  


    
        
            GeeksforGeeks
        
          
        Google Maps
          
        
        
        
    

      

输出：

示例 2：卫星

  

    
        Google Maps | Types
    
  
    
    
    
         
    
        function GFG() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603), 
                zoom:17, 
                mapTypeId:google.maps.MapTypeId.SATELLITE
            };
               
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    

  


    
        
            GeeksforGeeks
        
          
        Google Maps
          
        
        
        
    

      

输出：

示例 3：混合

  

    
        Google Maps | Types
    
  
    
    
    
         
    
        function GFG() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603), 
                zoom:17, 
                mapTypeId:google.maps.MapTypeId.HYBRID
            };
               
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    

  


    
        
            GeeksforGeeks
        
          
        Google Maps
          
        
        
        
    

      

输出：

示例 4：地形

  

    
        Google Maps | Types
    
  
    
    
    
         
    
        function GFG() {
            var CustomOp = {
                center:new google.maps.LatLng(
                        28.502212, 77.405603), 
                zoom:17, 
                mapTypeId:google.maps.MapTypeId.TERRAIN
            };
               
            // Map object
            var map = new google.maps.Map(
                document.getElementById("DivID"),
                CustomOp
            );
        }
    

  


    
        
            GeeksforGeeks
        
          
        Google Maps
          
        
        
        
    

      

输出：