社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > 科技周边 > IT业界 > Google Maps使用GMAPS.JS变得容易

Google Maps使用GMAPS.JS变得容易

尊渡假赌尊渡假赌尊渡假赌
发布： 2025-02-19 12:56:12
原创
324 人浏览过

Google Maps Made Easy with GMaps.js

Google Maps使用GMAPS.JS变得容易

Google Maps已被证明是一项非常成功的Google服务，并结合了一系列宝贵的工具，例如Street View，Route Planning和Google流量。许多公司和组织都依靠Google Maps提供服务 - 这要归功于Google Maps API，他们可以这样做。

钥匙要点

> gmaps.js是一个开源JavaScript库，简化了Google Maps JavaScript API，使开发人员更容易使用地图创建自定义应用程序。
    gmaps.js提供了各种用于自定义地图的组件，包括标记，多边形，叠加层，地理位置，地理编码和事件。它还允许创建可以嵌入网站的静态图。
  • 库提供了添加和删除标记，绘制多边形和多边形，创建圆形形状以及添加带有HTML内容的覆盖的方法。> 可以使用GMAPS.js中的GeoCode（）方法来实现从给定位置地址计算地理坐标的过程。同样，Geolocate（）方法可用于计算用户当前的地理位置。
    • gmaps.js还支持事件，允许开发人员在地图上发生特定事件的发生函数，例如双击或鼠标。
  • >
  • Google地图API和GMAPS
    • Google在2005年推出了Google Maps API。这使开发人员可以使用地图创建自定义应用程序。 Google随后启动了用于Android和iOS应用程序开发的API。
  • 与地图API一样有用，它们需要一些知识来利用。这就是gmaps.js的来源。gmaps.js是一个开源的MIT-LICERCE JAVASCRIPT库。 GMAPS由Gustavo Leon撰写，旨在简化原始的Google Maps JavaScript API。它需要处理广泛的API代码，并提供了处理地图的适当方法。它更干净，更简洁，因此更易于使用。
    • 在本文中，我们将研究标记，多边形和叠加层之类的地图组件。我们还将讨论静态地图，以及使用地理位置和地理编码在用户位置上操作的使用。所有这些都将参考GMAP。它可以帮助您使用易于使用的方法创建地图应用程序。我已经用它来创建一个示例应用程序（MAPIT），我将在文章末尾进行进一步讨论。
  • Google API和GMAP
>下面的示例来自原始文档页面。代码（仅JavaScript）在纬度为-34.397和经度150.644的中心上加载地图，缩放级别为8：>

地图是映射将加载的HTML元素ID。

我们可以用这样的gmap编写相同的基本应用：

>
<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>
登录后复制
登录后复制
登录后复制

本教程将指导您完成地图中最常用的组件，示例笔以演示每个组件。

入门

创建一个基本的HTML页面，并向地图API添加引用。您也需要包含GMAPS库。因此，转到GMAPS并下载gmaps.js。将其包含在您的网页中，您就可以了。

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>
登录后复制
登录后复制
登录后复制
这是一个基本页面，我将在下面的示例摘要中引用。这些示例中的某些示例将修改地图对象。

>

组件

> MAPS API提供了各种用于自定义地图的组件。可以使用较少代码的gmap添加相同的组件。

>

>事件

>可以将HTML DOM（文档对象模型）的更改描述为事件。您可以在地图上发生特定事件（例如双击或鼠标）来调用功能。以下片段定义了单击和zoom_changed事件的函数：

> 

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
登录后复制
登录后复制
登录后复制
>如果您愿意，可以添加其他事件。文档中的

>事件部分中提供了所有地图事件的列表。有些有用的是：

>事件 描述 dbllick 双鼠标单击 鼠标 鼠标进入地图 鼠标 鼠标退出地图 拖 地图被拖动 右键 右鼠标单击 示例笔

标记

标记是地图上的定位器。它通常显示为悬挂在标记位置上的气球。 GMAPS提供添加标记的AddMarker（）方法。它接受标记的以下属性的字面属性：

>

lat：Latitude
  • lng：经度
  • >标题：鼠标上显示的标题
  • >图标：标记的自定义图像
  • 详细信息：带有额外数据的自定义对象
  • > Infowdoww：有关标记
    • 的信息
  • 其中
    • 必须为LAT和LNG分配值，而其他值则是可选的。 InfowDOWOW的价值应该是另一个对象。此对象本身具有以下属性：

内容：html内容
  • maxWidth：窗口的最大宽度。如果未设置，则窗口跨越其中的文本长度。
    • infowdindow支持更多选项。

此片段是AddMarker（）的有效示例：

>

在 

<span>var mapObj = new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: 48.857,
</span>  <span>lng: 2.295,
</span>  <span>click: function(e) {
</span>    <span>alert('You clicked on the map');
</span>  <span>},
</span>  <span>zoom_changed: function(e) {
</span>    <span>alert('You zoomed the map');
</span>  <span>}
</span><span>});</span>
登录后复制
登录后复制
示例笔

可以使用removemarker（）方法删除标记。将标记对象传递给它（在我们的情况下为m）作为参数：
<span>var m = mapObj.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>title: 'Eiffel Tower',
</span>  <span>infoWindow: {
</span>    <span>content: '<h4>Eiffel Tower</h4><div>Paris, France</div>',
</span>    <span>maxWidth: 100
</span>  <span>}
</span><span>});</span>
登录后复制
登录后复制
>

> removeMarkers（）共同删除了与地图对象关联的所有标记。

>

<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>
登录后复制
登录后复制
登录后复制

地理编码

为了在地图上找到任何点，您需要具有其地理坐标（ latitude 和 ）。地理编码是从给定的位置地址计算这些地理坐标的。 GeoCode（）方法允许我们这样做。它将位置地址作为输入和处理该地址的处理坐标。>

    地址：位置地址字符串
    • 回调：地理编码后调用函数
>让我们计算位于英国

>英国的 stonehenge 的纬度和经度。下面的摘要将计算给定地址的地理坐标，并在该位置中心地图。如果找不到结果，则会显示一条消息： 

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>
登录后复制
登录后复制
登录后复制
setCenter（）方法将其参数带有纬度和经度，并以地理位置为中心。它还接受可选的回调参数，这是在地图以中心触发的函数。

回调函数中有两个参数：结果和状态。

> 结果是一个对象数组，将所有位置的位置存储在所有位置的位置。由于可以有多个具有相同名称的地方，因此可以有一个以上的结果。结果存储了其中的每个。可以使用结果[i]。demetry.location。
如果找不到地址的结果，状态存储

零_RESULTS

示例笔 geolocation

地理位置计算用户当前的地理位置。 Geolocate（）方法使我们可以利用此功能。它接受一个具有四个属性的对象，其中始终是可选的，而其他属性都是必需的。每个属性被定义为在特定情况下执行的函数：

> 成功：地理位置成功> 错误：地理位置不成功

not_supported：浏览器不支持地理位置

始终：在每种情况下执行

>

    示例笔
    • polylines
    • > polylines有助于追踪地图上的路径。可以通过连接不同点的坐标来形成路径。 drawPolyline（）方法为路径绘制了一条多线线。该路径作为坐标的数组（ latitude
  • >和
    • ）提供。除路径外，您还可以为多线线指定其他属性。其中一些是：     
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
登录后复制
登录后复制
登录后复制

> strokeWeight

> strokecolor

> streopacity >所有三个都定义了多线线的样式。还有其他人，尽管我们不会在本文中介绍它们。>

    示例笔
    • 可以使用RemovePolyLine（）方法删除多线线。它将多线对象作为其参数。使用以下方式删除PL Polyine
<span>var map;
</span><span>function initMap() {
</span>  map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span>    <span>center: {lat: -34.397, lng: 150.644},
</span>    <span>zoom: 8
</span>  <span>});
</span><span>}</span>
登录后复制
登录后复制
登录后复制

> removepolylines（）去除与地图对象相关的所有polyline。 

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>
登录后复制
登录后复制
登录后复制
多边形

> drawpolygon（）可帮助您在地图上创建多边形。几乎就像drawpolyline（）方法一样，您需要定义路径属性。 Polygon的中风风格属性（卒中，strokecolor和streopocience）作品。他们定义多边形的边界。除此之外，您还可以指定多边形的填充颜色和不透明度：

fillcolor
  • fillopacity
    • 其他多边形选项可以在文档中找到。
>

记住：这是drawpolyline（）的路径属性和drawpolygon（）的路径属性 
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>#map</span> {
</span></span></span><span><span>        <span>width: 400px;
</span></span></span><span><span>        <span>height: 400px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span>/* Map Object */
</span></span></span><span><span>      <span>var mapObj = new GMaps({
</span></span></span><span><span>        <span>el: '#map',
</span></span></span><span><span>        <span>lat: 48.857,
</span></span></span><span><span>        <span>lng: 2.295
</span></span></span><span><span>      <span>});
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
登录后复制
登录后复制
登录后复制
示例笔

要删除多边形PG，请使用：

删除MapObj中定义的所有多边形：

<span>var mapObj = new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: 48.857,
</span>  <span>lng: 2.295,
</span>  <span>click: function(e) {
</span>    <span>alert('You clicked on the map');
</span>  <span>},
</span>  <span>zoom_changed: function(e) {
</span>    <span>alert('You zoomed the map');
</span>  <span>}
</span><span>});</span>
登录后复制
登录后复制

圆圈

用drawpolygon（）创建圆形形状是不可行的。 drawcircle（）可以帮助您。它的参数列表包括：
<span>var m = mapObj.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>title: 'Eiffel Tower',
</span>  <span>infoWindow: {
</span>    <span>content: '<h4>Eiffel Tower</h4><div>Paris, France</div>',
</span>    <span>maxWidth: 100
</span>  <span>}
</span><span>});</span>
登录后复制
登录后复制

lat：中心的纬度

lng：中心的经度
  • 半径：地球上的半径。
  • 其他选项包括中风和填充的样式（与多边形相同），还有一些。
    • >
    • 示例笔

覆盖层

mapObj<span>.addMarker({
</span>  <span>lat: 48.8583701,
</span>  <span>lng: 2.2944813,
</span>  <span>mouseover: function(e) {
</span>    <span>alert('Triggered');
</span>  <span>}
</span><span>});</span>
登录后复制
覆盖层是在地图上具有HTML内容的图层。 GMAPS用Drawoverlay（）方法支持覆盖层。它接受以下哈希：

lat：Latitude

lng：经度

    内容：html内容
    • 垂直align：顶部，中，底部
    • 水平allgin：左，中，右
    • 垂直officeoffset
    • > hixontalOffset
  • 对齐和偏移相对于由LAT和LNG定义的点。。
    • >示例片段：
>您可以为内容定义CSS样式。在我们的示例中，我们定义了覆盖类。

>

示例笔

mapObj<span>.removeMarker(m);</span>
登录后复制
删除覆盖层？好吧，你知道：

mapObj<span>.removeMarkers();</span>
登录后复制
>删除地图对象的所有叠加层？你也知道：

>静态地图

<span>GMaps.geocode({
</span>  <span>address: 'Stonehenge, United Kingdom',
</span>  <span>callback: function(results<span>, status</span>) {
</span>    <span>if (status == 'OK') {
</span>      latlng <span>= results[0].geometry.location;
</span>      mapObj<span>.setCenter(latlng.lat(), latlng.lng());
</span>    <span>} else if (status == 'ZERO_RESULTS') {
</span>      <span>alert('Sorry, no results found');
</span>    <span>}
</span>  <span>}
</span><span>});</span>
登录后复制
静态地图是地图的图像，可以独立地嵌入网站中。 GMAP可让您生成静态图的URL。然后可以将此URL作为图像添加为源。

> staticmapurl（）在获取以下参数后生成所需的映射URL：
<span>GMaps.geolocate({
</span>  <span>success: function(position) {
</span>    mapObj<span>.setCenter(position.coords.latitude, position.coords.longitude);
</span>  <span>},
</span>  <span>error: function(error) {
</span>    <span>alert('Geolocation failed: ' + error.message);
</span>  <span>},
</span>  <span>not_supported: function() {
</span>    <span>alert("Your browser does not support geolocation");
</span>  <span>},
</span>  <span>always: function() {
</span>    <span>alert("Always");
</span>  <span>}
</span><span>});</span>
登录后复制

>大小：像素

的宽度和高度的数组

lat

lng

    Zoom
  • >代码段：
    • 示例笔
    • 在我们的示例中，我们创建了一个IMG元素，并将URL添加到其src：：

我们也可以在静态图上应用标记和各个多数。>

示例笔
<span>var path = [
</span>  <span>[-12.044012922866312, -77.02470665341184],
</span>  <span>[-12.05449279282314, -77.03024273281858],
</span>  <span>[-12.055122327623378, -77.03039293652341],
</span>  <span>[-12.075917129727586, -77.02764635449216],
</span>  <span>[-12.07635776902266, -77.02792530422971],
</span>  <span>[-12.076819390363665, -77.02893381481931],
</span>  <span>[-12.088527520066453, -77.0241058385925]
</span><span>];
</span>
<span>var pl = mapObj.drawPolyline({
</span>  <span>path: path,
</span>  <span>strokeColor: '#76ff03',
</span>  <span>strokeOpacity: 1,
</span>  <span>strokeWeight: 10
</span><span>});</span>
登录后复制

示例应用程序（mapit）

mapit（github上的查看源）为源和目标之间的路由创建静态地图。缩小到地图上的地址，并放置两个标记（源和目的地）。 Mapit将追踪从一个标记到另一个标记的路线。它将使用当前配置为静态图创建一个URL。您可以预览静态地图并下载图像。

结论

本文涵盖了地图的基本组成部分。我敢肯定，它已成为GMAP和交互式地图应用程序的良好启动指南。但这不应该在这里停止。 gmapsjs您可以做更多的事情。

您是否使用过Gmaps？如果是这样，您的经验是什么。如果您有任何评论或疑问，请加入下面的讨论。 经常询问的问题（常见问题解答）有关GMAPS.js

的Google地图

>我如何开始使用gmaps.js？

才能开始使用gmaps.js，您首先需要将Google Maps JavaScript API包含在HTML文件中。之后，包括gmaps.js库。您可以从官方的GitHub存储库下载或使用CDN。包含这些脚本后，您可以通过创建新的GMAP对象并传递HTML元素的ID来初始化新地图，并在其中您希望显示地图，以及一些选项，例如中心的纬度和经度地图。

> gmaps.js.js？

gmaps.js的关键功能是什么简化了使用Google Maps的过程。它提供了一个简单直观的API，用于创建和操纵地图。关键功能包括轻松添加标记，多边形和层，地理位置，地理编码等能力。它还支持事件，允许您响应用户交互，例如点击或拖动。 .js很简单。您可以在gmaps对象上使用addmarker方法，并将其传递给具有标记的纬度和经度的对象。您还可以包含其他选项，例如标题，单击事件等等。

>我如何将geolocation与gmaps.js？

​​

gmaps.js一起使用getgeolocation提供了一种可以用来使用的getGeoLocation方法。获取用户的当前位置。此方法返回了一个可以通过用户的纬度和经度解决的承诺。然后，您可以使用此信息将地图集中在用户的位置上，或在其位置添加标记。

如何使用gmaps.js.js.js？

地理编码是转换的过程地址为地理坐标，您可以用来放置标记或放置地图。 gmaps.js提供了一种地址，并返回以地理编码结果解决的诺言。

如何将事件添加到gmaps.js？

gmaps.js的地图中，支持各种事件，包括单击，拖动，zoom_changed等。您可以使用AddListener方法将事件侦听器添加到您的GMAPS对象中，并在事件名称中传递并在事件发生时要执行一个回调函数。 ？

如何使用gmaps.js.js？

gmaps.js在地图上绘制形状。提供了在地图上绘制各种形状的方法，包括线，多边形，圆形和矩形。您可以在gmaps对象上使用Draboverlay，drawpolygon，drawcircle和drawRectangle方法。

>

>如何使用gmaps.js.js？

gmaps.js允许您允许您允许您自定义地图的外观。使用样式自定义地图的外观。创建gmaps对象时，您可以通过样式选项传递，这应该是一系列样式对象，描述了如何样式的地图元素进行样式。

>

>我如何使用gmaps.js处理错误？ >

以上是Google Maps使用GMAPS.JS变得容易的详细内容。更多信息请关注PHP中文网其他相关文章！

上一篇：使用视频时如何提供出色的UX 下一篇：开发静态站点生成器工作流程
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2790
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2922
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2439
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
2349
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2423
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板