jQuery如何使用GMaps插件？代码示例指南

2021年3月26日17:41:57 发表评论 965 次浏览

本文概述

jQuery提供GMaps帮助程序员使用的插件谷歌地图以各种方式。你必须在工作文件夹中下载所需的文件, 以便程序员可以将其包含在HTML结构页的开头部分中, 如以下程序中所实现。

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

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

https://www.latlong.net/

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

html

<!DOCTYPE html>
< html >
     < head >
         < meta charset = "utf-8" />
         < title >jQuery GMaps Plugin</ title >
  
         < script type = "text/javascript" src =
"http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" >
         </ script >
         < script type = "text/javascript" src =
"http://maps.google.com/maps/api/js?sensor=true" >
          </ script >
         < script type = "text/javascript" src = "gmaps.js" ></ script >
  
         < link rel = "stylesheet" href =
  "http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
         < link rel = "stylesheet" type = "text/css" href = "examples.css" />
  
         < style >
             body {
                 text-align: center;
             }
         </ style >
         < script type = "text/javascript" >
             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, });
             });
         </ script >
     </ head >
     < body >
         < h1 style = "color: green;" >lsbin</ h1 >
         < b >jQuery GMaps Plugin</ b >
          
< p ></ p >
  
         < div class = "row" >
             < div class = "span11" >
                 < div id = "map" ></ div >
             </ div >
         </ div >
     </ body >
</ html >

输出： 

jQuery如何使用GMaps插件？代码示例指南1

范例2：以下程序使用GMap插件在输入位置周围画圆。

html

<!DOCTYPE html>
< html >
     < head >
         < meta charset = "utf-8" />
         < title >jQuery GMaps Plugin</ title >
         < script type = "text/javascript" src =
  "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" >
         </ script >
         < script type = "text/javascript" src =
"http://maps.google.com/maps/api/js?sensor=true" ></ script >
         < script type = "text/javascript" src = "gmaps.js" ></ script >
         < link rel = "stylesheet" href =
"http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
         < link rel = "stylesheet" type = "text/css" href = "examples.css" />
  
         < style >
             body {
                 text-align: center;
             }
         </ style >
         < script type = "text/javascript" >
             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);
             });
         </ script >
     </ head >
     < body >
         < h1 style = "color: green;" >lsbin</ h1 >
         < b >Draw circle using GMaps Plugin</ b >
          
< p ></ p >
  
         < div class = "row" >
             < div class = "span11" >
                 < div id = "map" ></ div >
             </ div >
         </ div >
     </ body >
</ html >

输出： 

jQuery如何使用GMaps插件？代码示例指南2

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

html

<!DOCTYPE html>
< html >
     < head >
         < meta charset = "utf-8" />
         < title >jQuery GMaps Plugin Event handling</ title >
         < script type = "text/javascript" src =
  "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" >
         </ script >
         < script type = "text/javascript" src =
  "http://maps.google.com/maps/api/js?sensor=true" ></ script >
         < script type = "text/javascript" src = "gmaps.js" ></ script >
         < link rel = "stylesheet" href =
"http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
         < link rel = "stylesheet" type = "text/css" href = "examples.css" />
  
         < style >
             body {
                 text-align: center;
             }
  
             .eventClass {
                 width: 90%;
                 text-align: center;
                 font-weight: bold;
                 padding: 10px;
                 box-sizing: content-box;
             }
         </ style >
         < script type = "text/javascript" >
             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);
                     }, });
             });
         </ script >
     </ head >
     < body >
         < h1 style = "color: green;" >lsbin</ h1 >
         < b >jQuery GMaps Plugin Event handling </ b >
          
< p ></ p >
  
         < div class = "row" >
             < div class = "span11" >
                 < div id = "map" ></ div >
             </ div >
         </ div >
         < br />
         < br />
         < div id = "ClickEventDivID" class = "eventClass" ></ div >
         < div id = "DragEventDivID" class = "eventClass" ></ div >
     </ body >
</ html >

输出： 

jQuery如何使用GMaps插件？代码示例指南3

范例4：以下示例解扰OpenStreetMap的地图类型GMap插入。

html

<!DOCTYPE html>
< html >
     < head >
         < meta charset = "utf-8" />
         < title >jQuery GMaps Plugins Map Types</ title >
         < script type = "text/javascript" src =
  "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" >
         </ script >
         < script type = "text/javascript" src =
  "http://maps.google.com/maps/api/js?sensor=true" ></ script >
         < script type = "text/javascript" src = "gmaps.js" ></ script >
  
         < link rel = "stylesheet" href =
"http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
         < link rel = "stylesheet" type = "text/css" href = "examples.css" />
         < style >
             body {
                 text-align: center;
             }
         </ style >
         < script type = "text/javascript" >
             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");
             });
         </ script >
     </ head >
     < body >
         < h1 style = "color: green;" >lsbin</ h1 >
         < b >jQuery GMaps Plugin Open Street Map </ b >
          
< p ></ p >
  
         < div class = "row" >
             < div class = "span11" >
                 < div id = "map" ></ div >
             </ div >
         </ div >
     </ body >
</ html >

输出： 

jQuery如何使用GMaps插件？代码示例指南4

范例5：以下示例演示了如何在地图的位置添加图层, 该图层在输出图像中显示。

html

<!DOCTYPE html>
< html >
     < head >
         < meta charset = "utf-8" />
         < title >jQuery GMaps Layers Maps</ title >
         < script src =
"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" >
         </ script >
         < script src =
"http://maps.google.com/maps/api/js?sensor=true&libraries=weather" >
         </ script >
         < script src = "gmaps.js" ></ script >
         < link rel = "stylesheet" href =
"http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
         < link rel = "stylesheet" type = "text/css" href = "examples.css" />
         < style >
             body {
                 text-align: center;
             }
         </ style >
  
         < script type = "text/javascript" >
             var map;
  
             $(function () {
                 map = new GMaps({
                     el: "#map", lat: 17.4574683, lng: 78.2822645, zoom: 3, });
  
                 map.addLayer("weather", {
                     clickable: true, });
  
                 map.addLayer("traffic");
             });
         </ script >
     </ head >
     < body >
         < h1 style = "green" >lsbin</ h1 >
         < b >jQuery GMaps Adding layers Feature</ b >
          
< p ></ p >
  
         < div class = "row" >
             < div class = "span11" >
                 < div id = "map" ></ div >
             </ div >
         </ div >
     </ body >
</ html >

输出：

jQuery如何使用GMaps插件？代码示例指南5

使用Google Maps的方式还有很多GMap插入。程序员可以根据应用程序的要求使用所有这些功能。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: