搜尋
首頁科技週邊IT業界Google Maps使用GMAPS.JS變得容易

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>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><style>></style></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></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><div> id<span>="map"</span>><span><span></span></span>
</div></span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script> src<span >="https://maps.googleapis.com/maps/api/js"</script></span>></span><span><span></span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script> src<span >="gmaps.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script>></script></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></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></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 id="Eiffel-Tower">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>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><style>></style></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></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><div> id<span>="map"</span>><span><span></span></span>
</div></span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script> src<span >="https://maps.googleapis.com/maps/api/js"</script></span>></span><span><span></span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script> src<span >="gmaps.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script>></script></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></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></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>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><style>></style></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></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><span><span><div> id<span>="map"</span>><span><span></span></span>
</div></span>></span>
</span>
    <span><!-- Google Maps JS API -->
</span>    <span><span><span><script> src<span >="https://maps.googleapis.com/maps/api/js"</script></span>></span><span><span></span>></span>
</span>    <span><!-- GMaps Library -->
</span>    <span><span><span><script> src<span >="gmaps.js"</script></span>></span><span><span></span>></span>
</span>    <span><span><span><script>></script></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></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></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 id="Eiffel-Tower">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中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
使用AWS ECS和LAMBDA的無服務器圖像處理管道使用AWS ECS和LAMBDA的無服務器圖像處理管道Apr 18, 2025 am 08:28 AM

該教程通過使用AWS服務來指導您通過構建無服務器圖像處理管道。 我們將創建一個部署在ECS Fargate群集上的next.js前端,與API網關,Lambda函數,S3桶和DynamoDB進行交互。 Th

CNCF ARM64飛行員:影響和見解CNCF ARM64飛行員:影響和見解Apr 15, 2025 am 08:27 AM

該試點程序是CNCF(雲本機計算基礎),安培計算,Equinix金屬和驅動的合作,簡化了CNCF GitHub項目的ARM64 CI/CD。 該計劃解決了安全問題和績效

使用GO構建網絡漏洞掃描儀使用GO構建網絡漏洞掃描儀Apr 01, 2025 am 08:27 AM

此基於GO的網絡漏洞掃描儀有效地確定了潛在的安全弱點。 它利用了GO的並發功能的速度功能,包括服務檢測和漏洞匹配。讓我們探索它的能力和道德

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境