iT邦幫忙

google map相關文章
共有 35 則文章
鐵人賽 Modern Web DAY 22
30天打造我的WebGIS 系列 第 22

技術 [Day 22] WebGIS中加入Google Directions導航API

前言 今天要來接Google路徑導航資訊,Google Maps API有很多很棒的東西可以用在WebGIS,路徑規劃就是其中之一,他的完整名稱是Directi...

技術 3 種常用的 Google Maps 嵌入方式

在網頁內嵌入地圖的需求時常會用到,以下三種是最常見的方法: Google Maps Embed API (內嵌網頁) Google Static Map...

鐵人賽 Modern Web DAY 14
30天打造我的WebGIS 系列 第 14

技術 [Day 14] WebGIS中的網格資料

前言 網格(raster)資料是指以規則網格的方式呈現空間資料,可能是長這樣: 上面是試圖以geojson模擬網格資料,網格間隔大概是一英里(1.6km),並且...

鐵人賽 Modern Web
重新認識 JavaScript 系列 第 34

技術 重新認識 JavaScript 番外篇 (4) - 台灣街景封面產生器 with Google map 街景

本系列文章已重新編修,並在加入部分 ES6 新篇章後集結成書,有興趣的朋友可至天瓏書局選購,感謝大家支持。 購書連結 https://www.tenlong....

技術 各位邦友們,用Google Map告訴大家你身在何方?

看大家一下子想知道星座,一下子想知道年齡的,不如我們就先從地點開始吧。 像是Looney大大在南部大家是知道的(因為常靠夭(誤),抱怨研討會在北部),好像很多人...

鐵人賽 Modern Web DAY 6

技術 [3-1] 打造你的美食地圖!用Here Maps API 秀出Google API餐廳資訊

本系列文章已出版實體書籍:「你的地圖會說話?WebGIS 與 JavaScript 的情感交織」(博碩文化)WebGIS啟蒙首選✖五家地圖API✖近百個程式範...

鐵人賽 開發技術 DAY 3

技術 Polymer 淺嚐元件使用

今日目標: 了解與使用GoogleMap元件 今天就來感受一下使用元件的快感,昨天雖然裝完Polymer核心和Marterial元件後,已經有數十個元件可以使用...

技術 最簡單的 Google Maps 嵌入方式 | 專案實作

工具有許多種,不過隨著專案大小與需求不同,搭配適合的實作方式才能達到最佳效益,常見的 Google Maps 優缺點比較看這裡。此次的需求只要在地圖上呈現座標地...

鐵人賽 Modern Web DAY 4

技術 [2-1] 點資料圖徵 X 瀏覽器定位 X 地址定位

本系列文章已出版實體書籍:「你的地圖會說話?WebGIS 與 JavaScript 的情感交織」(博碩文化)WebGIS啟蒙首選✖五家地圖API✖近百個程式範...

鐵人賽 開發技術 DAY 5

技術 Polymer 自定HTML標籤-GoogleMap三重奏(上)

今日目標: 動手打造自己專屬的HTML標籤 [線上執行範例] [程式碼] google-map-x3 這HTML標籤可以同時顯示三個不同地圖面貌,分別街道+衛星...

鐵人賽 Modern Web DAY 29

技術 {"29":"Geo+Gmp+導航+Places"}

再次回到,Google Map, 不是,是再次回到,Cordova Getolocation Plugin、Google Map、導航和Places的 結合。...

技術 Google Static Map Maker 靜態地圖 API 工具|專案實作

Google Static Map API 是將網頁上需要的地圖畫面,以靜態地圖圖片的方式顯示。優點 效能很好,因為只是一張圖片缺點 無法對圖片縮放、移動,只能...

鐵人賽 開發技術 DAY 4

技術 Polymer 元件應用

今日目標: 完成 GoogleMap + MarterialDesign 元件互動 今天就來感受一下Polymer的template與data-binding的...

技術 Google Maps JavaScript API 工具|專案實作

串接地圖 JavaScript API 中雖然相較起來難度較高,不過官方文件寫的也很簡單易懂。 使用方式 1.宣告 HTML5 文件,將 JS CDN 引入檔案...

鐵人賽 Mobile Development DAY 28
iOS Developer Learning Flutter 系列 第 28

技術 iOS Developer Learning Flutter. Lesson27 Map + Location

Andorid/Flutter的Dictionary也叫Map Today Preview 使用Flutter版Google Maps 跟 location(...

鐵人賽 Modern Web DAY 12

技術 {"12":"GEO&GMAP(定點導航)"}

Google MAPs Javascript API 還有一個功能就是「導航」,只是我需要的是,定點導航。因為目前工作上的需要,需要向我們的旅人,介紹在台東的景...

鐵人賽 開發技術 DAY 6

技術 Polymer 自定HTML標籤-GoogleMap三重奏(下)

今日目標: 了解元件包裝原始碼 延續昨天範例,接下來說明元件 完整程式碼 [線上範例] 第1行是載入polymer基本元件與polymer核心程式 第2行是載...

鐵人賽 自我挑戰組 DAY 27
Ruby菜鳥村村民遊記 系列 第 27

技術 遊記ep.27 Remove / Delete Marker in Google村

昨天我們讓 marker 增添了動感不少,今天想再來多增加一些跟地圖的互動,先來看一下程式碼的部分: <!DOCTYPE html> <htm...

鐵人賽 自我挑戰組 DAY 30
Ruby菜鳥村村民遊記 系列 第 30

技術 遊記ep.30 Click ! Draw ! in Google村

今天讓我們繼續介紹昨天折線的部分,上個章節我們介紹到 Marker,會不會想著如果可以把 Marker 跟 Polyline 做結合呢?那我們今天就來這麼做吧!...

鐵人賽 自我挑戰組 DAY 28
Ruby菜鳥村村民遊記 系列 第 28

技術 遊記ep.28 Marker labels in Google村

今天繼續來介紹,如何幫 Marker 做點美化~除了在 marker icon屬性設定,可以客制自己獨特的 icon 圖案: var image = 'http...

鐵人賽 自我挑戰組 DAY 22
Ruby菜鳥村村民遊記 系列 第 22

技術 遊記ep.22 Click and Marker in Google村

我們在 google map 上能隨意點擊一個座標點,前面的範例中我們都是去手動設定座標點,所以今天就配合昨天講過的事件觸發,來實際的實現這個功能: <!...

鐵人賽 Mobile Development DAY 22
iOS Developer Learning Android 系列 第 22

技術 iOS Developer Learning Android. Lesson 22 - Google Map (讀萬卷書、行萬里路)

⚠️⚠️⚠️跟MKMapView最大的不同就是,Google Map不是想用就可以用的,必須去申請金鑰 本日效果 實作步驟 去Gallery生一個Map A...

鐵人賽 自我挑戰組 DAY 29
Ruby菜鳥村村民遊記 系列 第 29

技術 遊記ep.29 polylines in Google村

鐵人賽也就30天,居然可以生兩次病 ... Orz最近還有專案在趕,頂著38.1度也是直接請醫生幫我注射,希望能快點恢復健康的狀態,也希望大家好好保重身體,健康...

技術 如何提取Google Maps坐標

您是否曾經想過知道平方英里內有多少家餐廳,就能賺錢? 沒有免費的午餐,但是,如果您知道如何使用Google地圖,則可以提取並收集餐廳的GPS,並將其存儲在自己的...

鐵人賽 自我挑戰組 DAY 21
Ruby菜鳥村村民遊記 系列 第 21

技術 遊記ep.21 Event in Google村

昨天講完地圖的種類,今天想介紹如何設定地圖的語言——在 Google 稱為 Localizing the Map <script src="ht...

鐵人賽 自我挑戰組 DAY 18
Ruby菜鳥村村民遊記 系列 第 18

技術 遊記ep.18 Geolocation! in Google村

今天因為時間關係,實在沒有辦法講得很詳細,請容我簡略帶過XD。 今天想帶來的是如何去定位你目前的位置(正確來說是你連上網路的主機的位置),我們先來看整體的程式碼...

鐵人賽 自我挑戰組 DAY 24
Ruby菜鳥村村民遊記 系列 第 24

技術 遊記ep.24 動態改變 in Google村

今天我們將介紹如何去觸發動態改變狀態,我們先來看一下完整的程式碼: <!DOCTYPE html> <html> <head&...

鐵人賽 自我挑戰組 DAY 25
Ruby菜鳥村村民遊記 系列 第 25

技術 遊記ep.25 Control Zoom and Pan in Google村

今天想介紹一下控制 Google Map 的幾個因素~先來看看今天的程式碼: <!DOCTYPE html> <html> <...