欧美日韩在线视频一区,国产成人精品999在线观看

標(biāo)記是地圖上的定位器。它通常顯示為懸掛在標(biāo)記位置上的氣球。 GMAPS提供添加標(biāo)記的AddMarker（）方法。它接受標(biāo)記的以下屬性的字面屬性：

地理編碼

結(jié)論

才能開(kāi)始使用gmaps.js，您首先需要將Google Maps JavaScript API包含在HTML文件中。之後，包括gmaps.js庫(kù)。您可以從官方的GitHub存儲(chǔ)庫(kù)下載或使用CDN。包含這些腳本後，您可以通過(guò)創(chuàng)建新的GMAP對(duì)象並傳遞HTML元素的ID來(lái)初始化新地圖，並在其中您希望顯示地圖，以及一些選項(xiàng)，例如中心的緯度和經(jīng)度地圖。

gmaps.js的關(guān)鍵功能是什麼簡(jiǎn)化了使用Google Maps的過(guò)程。它提供了一個(gè)簡(jiǎn)單直觀的API，用於創(chuàng)建和操縱地圖。關(guān)鍵功能包括輕鬆添加標(biāo)記，多邊形和層，地理位置，地理編碼等能力。它還支持事件，允許您響應(yīng)用戶交互，例如點(diǎn)擊或拖動(dòng)。 .js很簡(jiǎn)單。您可以在gmaps對(duì)像上使用addmarker方法，並將其傳遞給具有標(biāo)記的緯度和經(jīng)度的對(duì)象。您還可以包含其他選項(xiàng)，例如標(biāo)題，單擊事件等等。

gmaps.js一起使用getgeolocation提供了一種可以用來(lái)使用的getGeoLocation方法。獲取用戶的當(dāng)前位置。此方法返回了一個(gè)可以通過(guò)用戶的緯度和經(jīng)度解決的承諾。然後，您可以使用此信息將地圖集中在用戶的位置上，或在其位置添加標(biāo)記。

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

如何使用gmaps.js.js？

首頁(yè)

科技週邊

IT業(yè)界

Google Maps使用GMAPS.JS變得容易

Jack chen

Feb 19, 2025 pm 12:56 PM

Google Maps Made Easy with GMaps.js

Google Maps使用GMAPS.JS變得容易

Google Maps已被證明是一項(xiàng)非常成功的Google服務(wù)，並結(jié)合了一系列寶貴的工具，例如Street View，Route Planning和Google流量。許多公司和組織都依靠Google Maps提供服務(wù) - 這要?dú)w功於Google Maps API，他們可以這樣做。

鑰匙要點(diǎn)

> gmaps.js是一個(gè)開(kāi)源JavaScript庫(kù)，簡(jiǎn)化了Google Maps JavaScript API，使開(kāi)發(fā)人員更容易使用地圖創(chuàng)建自定義應(yīng)用程序。

庫(kù)提供了添加和刪除標(biāo)記，繪製多邊形和多邊形，創(chuàng)建圓形形狀以及添加帶有HTML內(nèi)容的覆蓋的方法。 > 可以使用GMAPS.js中的GeoCode（）方法來(lái)實(shí)現(xiàn)從給定位置地址計(jì)算地理坐標(biāo)的過(guò)程。同樣，Geolocate（）方法可用於計(jì)算用戶當(dāng)前的地理位置。
>
Google地圖API和GMAPS
與地圖API一樣有用，它們需要一些知識(shí)來(lái)利用。這就是gmaps.js的來(lái)源。 gmaps.js是一個(gè)開(kāi)源的MIT-LICERCE JAVASCRIPT庫(kù)。 GMAPS由Gustavo Leon撰寫(xiě)，旨在簡(jiǎn)化原始的Google Maps JavaScript API。它需要處理廣泛的API代碼，並提供了處理地圖的適當(dāng)方法。它更乾淨(jìng)，更簡(jiǎn)潔，因此更易於使用。
Google API和GMAP

>下面的示例來(lái)自原始文檔頁(yè)面。代碼（僅JavaScript）在緯度為-34.397和經(jīng)度150.644的中心上加載地圖，縮放級(jí)別為8：>

地圖是映射將加載的HTML元素ID。

我們可以用這樣的gmap編寫(xiě)相同的基本應(yīng)用：

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

本教程將指導(dǎo)您完成地圖中最常用的組件，示例筆以演示每個(gè)組件。

入門

創(chuàng)建一個(gè)基本的HTML頁(yè)面，並向地圖API添加引用。您也需要包含GMAPS庫(kù)。因此，轉(zhuǎn)到GMAPS並下載gmaps.js。將其包含在您的網(wǎng)頁(yè)中，您就可以了。

<span>new GMaps({
</span>  <span>el: '#map',
</span>  <span>lat: -34.397,
</span>  <span>lng: 150.644,
</span>  <span>zoom: 8
</span><span>});</span>

這是一個(gè)基本頁(yè)面，我將在下面的示例摘要中引用。這些示例中的某些示例將修改地圖對(duì)象。

組件

> MAPS API提供了各種用於自定義地圖的組件?？梢允褂幂^少代碼的gmap添加相同的組件。

>事件

>可以將HTML DOM（文檔對(duì)像模型）的更改描述為事件。您可以在地圖上發(fā)生特定事件（例如雙擊或鼠標(biāo)）來(lái)調(diào)用功能。以下片段定義了單擊和zoom_changed事件的函數(shù)：

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

>如果您願(yuàn)意，可以添加其他事件。文檔中的

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

>事件描述 dbllick 雙鼠標(biāo)單擊鼠標(biāo) 鼠標(biāo)進(jìn)入地圖鼠標(biāo) 鼠標(biāo)退出地圖拖地圖被拖動(dòng) 右鍵右鼠標(biāo)單擊示例筆

標(biāo)記

標(biāo)記是地圖上的定位器。它通常顯示為懸掛在標(biāo)記位置上的氣球。 GMAPS提供添加標(biāo)記的AddMarker（）方法。它接受標(biāo)記的以下屬性的字面屬性：

lat：Latitude

lng：經(jīng)度
>標(biāo)題：鼠標(biāo)上顯示的標(biāo)題
>圖標(biāo)：標(biāo)記的自定義圖像
詳細(xì)信息：帶有額外數(shù)據(jù)的自定義對(duì)象
> Infowdoww：有關(guān)標(biāo)記
其中

內(nèi)容：html內(nèi)容

maxWidth：窗口的最大寬度。如果未設(shè)置，則窗口跨越其中的文本長(zhǎng)度。

此片段是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（）方法刪除標(biāo)記。將標(biāo)記對(duì)像傳遞給它（在我們的情況下為m）作為參數(shù)：

<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（）共同刪除了與地圖對(duì)象關(guān)聯(lián)的所有標(biāo)記。

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

地理編碼

為了在地圖上找到任何點(diǎn)，您需要具有其地理坐標(biāo)（ latitude 和）。地理編碼是從給定的位置地址計(jì)算這些地理坐標(biāo)的。 GeoCode（）方法允許我們這樣做。它將位置地址作為輸入和處理該地址的處理坐標(biāo)。 >

>讓我們計(jì)算位於英國(guó)

>英國(guó)的 stonehenge 的緯度和經(jīng)度。下面的摘要將計(jì)算給定地址的地理坐標(biāo)，並在該位置中心地圖。如果找不到結(jié)果，則會(huì)顯示一條消息：

<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（）方法將其參數(shù)帶有緯度和經(jīng)度，並以地理位置為中心。它還接受可選的回調(diào)參數(shù)，這是在地圖以中心觸發(fā)的函數(shù)。

回調(diào)函數(shù)中有兩個(gè)參數(shù)：結(jié)果和狀態(tài)。
> 結(jié)果是一個(gè)對(duì)像數(shù)組，將所有位置的位置存儲(chǔ)在所有位置的位置。由於可以有多個(gè)具有相同名稱的地方，因此可以有一個(gè)以上的結(jié)果。結(jié)果存儲(chǔ)了其中的每個(gè)。可以使用結(jié)果[i]。 demetry.location。

如果找不到地址的結(jié)果，狀態(tài)存儲(chǔ)

零_RESULTS

示例筆geolocation

地理位置計(jì)算用戶當(dāng)前的地理位置。 Geolocate（）方法使我們可以利用此功能。它接受一個(gè)具有四個(gè)屬性的對(duì)象，其中始終是可選的，而其他屬性都是必需的。每個(gè)屬性被定義為在特定情況下執(zhí)行的函數(shù)：

> 成功：地理位置成功> 錯(cuò)誤：地理位置不成功

not_supported：瀏覽器不支持地理位置

始終：在每種情況下執(zhí)行

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 >所有三個(gè)都定義了多線線的樣式。還有其他人，儘管我們不會(huì)在本文中介紹它們。 >

<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（）去除與地圖對(duì)象相關(guān)的所有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（）可幫助您在地圖上創(chuàng)建多邊形。幾乎就像drawpolyline（）方法一樣，您需要定義路徑屬性。 Polygon的中風(fēng)風(fēng)格屬性（卒中，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>

示例筆

要?jiǎng)h除多邊形PG，請(qǐng)使用：

刪除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（）創(chuàng)建圓形形狀是不可行的。 drawcircle（）可以幫助您。它的參數(shù)列表包括：

<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：中心的經(jīng)度

半徑：地球上的半徑。
其他選項(xiàng)包括中風(fēng)和填充的樣式（與多邊形相同），還有一些。

覆蓋層

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內(nèi)容的圖層。 GMAPS用Drawoverlay（）方法支持覆蓋層。它接受以下哈希：

lat：Latitude

lng：經(jīng)度

對(duì)齊和偏移相對(duì)於由LAT和LNG定義的點(diǎn)。。

>您可以為內(nèi)容定義CSS樣式。在我們的示例中，我們定義了覆蓋類。

示例筆

mapObj<span>.removeMarker(m);</span>

刪除覆蓋層？好吧，你知道：

mapObj<span>.removeMarkers();</span>

>刪除地圖對(duì)象的所有疊加層？你也知道：

>靜態(tài)地圖

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

靜態(tài)地圖是地圖的圖像，可以獨(dú)立地嵌入網(wǎng)站中。 GMAP可讓您生成靜態(tài)圖的URL。然後可以將此URL作為圖像添加為源。

> staticmapurl（）在獲取以下參數(shù)後生成所需的映射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>

>大?。合袼?p>的寬度和高度的數(shù)組

lat

lng

>代碼段：

：

我們也可以在靜態(tài)圖上應(yīng)用標(biāo)記和各個(gè)多數(shù)。 >

示例筆

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

示例應(yīng)用程序（mapit）

mapit（github上的查看源）為源和目標(biāo)之間的路由創(chuàng)建靜態(tài)地圖?？s小到地圖上的地址，並放置兩個(gè)標(biāo)記（源和目的地）。 Mapit將追蹤從一個(gè)標(biāo)記到另一個(gè)標(biāo)記的路線。它將使用當(dāng)前配置為靜態(tài)圖創(chuàng)建一個(gè)URL。您可以預(yù)覽靜態(tài)地圖並下載圖像。

結(jié)論

本文涵蓋了地圖的基本組成部分。我敢肯定，它已成為GMAP和交互式地圖應(yīng)用程序的良好啟動(dòng)指南。但這不應(yīng)該在這裡停止。 gmapsjs您可以做更多的事情。

您是否使用過(guò)Gmaps？如果是這樣，您的經(jīng)驗(yàn)是什麼。如果您有任何評(píng)論或疑問(wèn)，請(qǐng)加入下面的討論。 經(jīng)常詢問(wèn)的問(wèn)題（常見(jiàn)問(wèn)題解答）有關(guān)GMAPS.js

的Google地圖

>我如何開(kāi)始使用gmaps.js？

才能開(kāi)始使用gmaps.js，您首先需要將Google Maps JavaScript API包含在HTML文件中。之後，包括gmaps.js庫(kù)。您可以從官方的GitHub存儲(chǔ)庫(kù)下載或使用CDN。包含這些腳本後，您可以通過(guò)創(chuàng)建新的GMAP對(duì)象並傳遞HTML元素的ID來(lái)初始化新地圖，並在其中您希望顯示地圖，以及一些選項(xiàng)，例如中心的緯度和經(jīng)度地圖。

> gmaps.js.js？

gmaps.js的關(guān)鍵功能是什麼簡(jiǎn)化了使用Google Maps的過(guò)程。它提供了一個(gè)簡(jiǎn)單直觀的API，用於創(chuàng)建和操縱地圖。關(guān)鍵功能包括輕鬆添加標(biāo)記，多邊形和層，地理位置，地理編碼等能力。它還支持事件，允許您響應(yīng)用戶交互，例如點(diǎn)擊或拖動(dòng)。 .js很簡(jiǎn)單。您可以在gmaps對(duì)像上使用addmarker方法，並將其傳遞給具有標(biāo)記的緯度和經(jīng)度的對(duì)象。您還可以包含其他選項(xiàng)，例如標(biāo)題，單擊事件等等。

>我如何將geolocation與gmaps.js？

gmaps.js一起使用getgeolocation提供了一種可以用來(lái)使用的getGeoLocation方法。獲取用戶的當(dāng)前位置。此方法返回了一個(gè)可以通過(guò)用戶的緯度和經(jīng)度解決的承諾。然後，您可以使用此信息將地圖集中在用戶的位置上，或在其位置添加標(biāo)記。

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

地理編碼是轉(zhuǎn)換的過(guò)程地址為地理坐標(biāo)，您可以用來(lái)放置標(biāo)記或放置地圖。 gmaps.js提供了一種地址，並返回以地理編碼結(jié)果解決的諾言。

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

gmaps.js的地圖中，支持各種事件，包括單擊，拖動(dòng)，zoom_changed等。您可以使用AddListener方法將事件偵聽(tīng)器添加到您的GMAPS對(duì)像中，並在事件名稱中傳遞並在事件發(fā)生時(shí)要執(zhí)行一個(gè)回調(diào)函數(shù)。？