jQuery GMaps 插件

jQuery 提供了GMaps Plugin，它可以帮助程序员以多种方式使用 Google 地图。您必须在工作文件夹中下载所需的文件，以便程序员可以将其包含在 HTML 结构页面的头部部分，如在以下程序中实现的那样。

jQuery GMaps 插件下载链接： https://hpneo.dev/gmaps/

在以下示例中，我们使用了有效的现有位置的纬度和经度，可以通过在以下链接的输入控制框中输入位置地址来获取。请记下用户输入地址的纬度和经度，以便在代码中进一步处理。

https://www.latlong.net/

示例1：下面的示例演示了基于纬度和经度值的GMaps插件的基本调用，以显示地图中的位置。

html

    
        
        jQuery GMaps Plugin
 
        
        
        
         
        
 
        
        
 
        
            body {
                text-align: center;
            }
        
        
            var map;
            $(document).ready(function () {
                map = new GMaps({
                    el: "#map",
                    lat: 21.164904,
                    lng: 81.324297,
                    zoomControl: true,
                    zoomControlOpt: {
                        style: "SMALL",
                        position: "BOTTOM_LEFT",
                    },
                    panControl: true,
                    streetViewControl: true,
                    mapTypeControl: true,
                });
            });
        
    
    
        GeeksForGeeks
        jQuery GMaps Plugin
         
 

 
 
        
            
                
            
        
    

输出 ：

示例 2：以下程序使用GMap插件在输入位置周围绘制圆圈。

html

    
        
        jQuery GMaps Plugin
        
        
        
        
        
        
 
        
            body {
                text-align: center;
            }
        
        
            var map;
 
            $(document).ready(function () {
                map = new GMaps({
                    el: "#map",
                    lat: 17.4574683,
                    lng: 78.2822645,
                });
 
                var latitude = 17.4574683;
                var longitude = 78.2822645;
 
                circle = map.drawCircle({
                    lat: latitude,
                    lng: longitude,
                    radius: 451,
                    strokeColor: "#33FFAF",
                    strokeOpacity: 1,
                    strokeWeight: 4,
                    fillColor: "#33FFAF",
                    fillOpacity: 0.5,
                });
 
                for (var i in paths) {
                    bounds.push(paths[i]);
                }
                var arrayVar = [];
                for (var i in bounds) {
                    latitudeLongitude =
                      new google.maps.LatLng(bounds[i][0], bounds[i][1]);
                    arrayVar.push(latitudeLongitude);
                }
                for (var i in paths) {
                    latitudeLongitude =
                      new google.maps.LatLng(paths[i][0], paths[i][1]);
                    arrayVar.push(latitudeLongitude);
                }
                map.fitLatLngBounds(arrayVar);
            });
        
    
    
        GeeksForGeeks
        Draw circle using GMaps Plugin
         
 

 
 
        
            
                
            
        
    

输出 ：

示例 3：以下程序演示了插件的事件处理功能。它显示有关单击和拖动事件的消息。

html

    
        
        jQuery GMaps Plugin Event handling
        
        
        
        
        
        
 
        
            body {
                text-align: center;
            }
 
            .eventClass {
                width: 90%;
                text-align: center;
                font-weight: bold;
                padding: 10px;
                box-sizing: content-box;
            }
        
        
            var map;
 
            $(document).ready(function () {
                map = new GMaps({
                    el: "#map",
                    zoom: 15,
                    lat: 17.4574683,
                    lng: 78.2822645,
                    click: function (e) {
                        var info = "Click event occured!";
                        $("#ClickEventDivID").text(info);
                    },
                    dragend: function (e) {
                        var info = "User dragged a location !";
                        $("#DragEventDivID").text(info);
                    },
                });
            });
        
    
    
        GeeksForGeeks
        jQuery GMaps Plugin Event handling 
         
 

 
 
        
            
                
            
        
        
        
        
        
    

输出 ：

示例4：以下示例演示了GMap插件的OpenStreetMap地图类型。

html

    
        
        jQuery GMaps Plugins Map Types
        
        
        
        
 
        
        
        
            body {
                text-align: center;
            }
        
        
            var map;
            $(document).ready(function () {
                map = new GMaps({
                    el: "#map",
                    lat: 17.47514,
                    lng: 78.3003,
                    mapTypeControlOptions: {
                        mapTypeIds: ["hybrid", "roadmap", "satellite",
                                               "terrain", "osm", "cloudmade"],
                    },
                });
 
                map.addMapType("osm", {
                    getTileUrl: function (coord, zoom) {
                        return "http://tile.openstreetmap.org/"
                          + zoom + "/" + coord.x + "/" + coord.y + ".png";
                    },
                    tileSize: new google.maps.Size(256, 256),
                    name: "OpenStreetMap",
                    maxZoom: 15,
                });
 
                map.setMapTypeId("osm");
            });
        
    
    
        GeeksForGeeks
        jQuery GMaps Plugin Open Street Map 
         
 

 
 
        
            
                
            
        
    

输出 ：

示例 5：以下示例演示将图层添加到地图中显示在输出图像中的位置。

html

    
        
        jQuery GMaps Layers Maps
        
        
        
        
        
        
        
        
            body {
                text-align: center;
            }
        
 
        
            var map;
 
            $(function () {
                map = new GMaps({
                    el: "#map",
                    lat: 17.4574683,
                    lng: 78.2822645,
                    zoom: 3,
                });
 
                map.addLayer("weather", {
                    clickable: true,
                });
 
                map.addLayer("traffic");
            });
        
    
    
        GeeksForGeeks
        jQuery GMaps Adding layers Feature
         
 

 
 
        
            
                
            
        
    

输出 ：

使用 GMap插件可以通过多种方式使用谷歌地图。程序员可以根据应用程序的要求使用所有这些。