锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识插件前端开发谷歌地图

本文概述

  • html
  • html
  • html
  • html
  • html
jQuery提供GMaps帮助程序员使用的插件谷歌地图以各种方式。你必须在工作文件夹中下载所需的文件, 以便程序员可以将其包含在HTML结构页的开头部分中, 如以下程序中所实现。
jQuery GMaps插件下载链接：https://hpneo.dev/gmaps/
在以下示例中, 我们使用的是有效的现有位置的纬度和经度, 这可以通过以下链接在输入控制框中输入位置地址来获得。请记下用户输入地址的经度和纬度, 以进一步进行代码处理。
https://www.latlong.net/
【jQuery如何使用GMaps插件（代码示例指南）】范例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 = "https://www.lsbin.com/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 = "https://www.lsbin.com/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插件（代码示例指南）

文章图片
范例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 = "https://www.lsbin.com/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 = "https://www.lsbin.com/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插件（代码示例指南）

文章图片
范例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 = "https://www.lsbin.com/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 = "https://www.lsbin.com/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插件（代码示例指南）

文章图片
范例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 = "https://www.lsbin.com/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 = "https://www.lsbin.com/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插件（代码示例指南）

文章图片
范例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 = "https://www.lsbin.com/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 = "https://www.lsbin.com/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插件（代码示例指南）

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

    推荐阅读


    上一篇：Python中进程的同步和池化（代码实现和图解）

    下一篇：模糊集的常见操作及示例和代码