Google Maps使用GMAPS.JS变得容易-IT业界-PHP中文网

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

地理编码

结论

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

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

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

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

如何使用gmaps.js.js？

首页

科技周边

IT业界

Google Maps使用GMAPS.JS变得容易

尊渡假赌尊渡假赌尊渡假赌

Feb 19, 2025 pm 12:56 PM

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，使开发人员更容易使用地图创建自定义应用程序。

库提供了添加和删除标记，绘制多边形和多边形，创建圆形形状以及添加带有HTML内容的覆盖的方法。> 可以使用GMAPS.js中的GeoCode（）方法来实现从给定位置地址计算地理坐标的过程。同样，Geolocate（）方法可用于计算用户当前的地理位置。
>
Google地图API和GMAPS
与地图API一样有用，它们需要一些知识来利用。这就是gmaps.js的来源。gmaps.js是一个开源的MIT-LICERCE JAVASCRIPT库。 GMAPS由Gustavo Leon撰写，旨在简化原始的Google Maps JavaScript API。它需要处理广泛的API代码，并提供了处理地图的适当方法。它更干净，更简洁，因此更易于使用。
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：有关标记
其中

内容：html内容

maxWidth：窗口的最大宽度。如果未设置，则窗口跨越其中的文本长度。

此片段是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：浏览器不支持地理位置

始终：在每种情况下执行

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

<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：经度

对齐和偏移相对于由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

>代码段：

：

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

示例笔

<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>

登录后复制