由於目前要使用到google map 做一些用戶的GPS紀錄，所以來看看如何在google map上面做一些畫 polyline的方式。這邊就是做個紀錄避免自己忘記。以下內容為參考google maps platform 網站的Document與demo code。
以下是我的系統與工具版本：
OS: ubuntu 16.04 LTS
Angular Cli: 6.0.8
Angular: 6.0.0
VScode: 1.24.1
NPM: 6.1.0
Yarn: 1.7.0
首先由於Google map API必須在console上建立一個project 然後獲得一組id才能使用Google map 提供的一些功能。當然Google map API 也會有費率的問題，不過以我們單純做測試是不會到收費的程度。關於費率可以在這裡網站查閱
一開始先到Google Maps Platform 做一個建立project的動作。
點擊畫面的『開始使用』就會跳出啟用Google地圖平台的視窗，由於我們只是做地圖劃路線的功能所以我們只打勾『地圖』這個功能選項就好。
接著會要我們選擇Project，這邊我們選擇建立新的專案並取名為MyMap。
接著就會轉址到Google console 頁面並且拿到這個專案的API Key，這個Key很重要所以請先存下來。
接著我們用Angular 建立一個新專案：
# ng new googlemapapi --routing
然後我們安裝 "@types/googlemaps" 作為我們開發時會用到intellisense 跟避免build code時 compiler 對於google map api的錯誤。
# yarn add @types/googlemaps
這邊我們暫時就把用到的東西都裝好了。
關於Google maps API的說明文件其實都可以在這邊找到而且還有一些範例可以參考，不過這邊使用的單純的Javascript但是只要稍做點修改就可以套用在Angular 上面。
這邊也有人推薦一個Angular的google map 套件叫做AGM，雖然我不知道我的方式在google map其他功能上有沒有問題，但是就我需要的Google map功能上在local test 是沒問題。當然如果擔心的朋友也可以使用AGM這個套件，因為他應該是Angular 最多人用有關google map API的套件 Support上應該會比較完整。
接著我們在googlemap的angular project內 把index.html內在區加入下列code：
這邊不同於官方說明文件的script是少了後方的&callback=initMap這個串字，因為官方的script是在download完map api js後直接執行initMap這個function，但是我們並不需要這個callback所以把這個callback的行為拿掉。
至於剛剛我們在google console 拿到的api key 就可以填入你的api key中
為了不弄亂Angular架構我們再新增一個Component叫做home好了。
# ng g c home
然後修改app-routing. module.ts在 const routes: Routes 修改如下：
然後記得上方要import HomeComponent進來
最後我們把app.component.html原先angular 產生的code拿掉，只留下
接著我們開啟home.componet.ts後把 @types/googlemap要先import 進來：
然後順便import ElementRef 等等在程式內可以用來抓取DOM物件用：
這時候我們可以先把home.component.html做點修改，讓我們等等要顯示的Google map比較方便。
至於 css 部份我這邊簡單的撰寫如下：
.container {
display: grid;
grid-template-columns: 3fr 7fr;
grid-template-rows: auto;
grid-row-gap: 5px;
justify-items: start;
justify-content: stretch;
align-items: center;
}
.showmap {
grid-column-start: 1;
grid-column-end: 10;
border: 1px solid #69a0d6;
width: 100%;
height: 400px;
display: flex;
}
.name {
font-size: 14px;
color: rgb(211, 83, 250);
display: inline-block;
grid-column-start: 1;
grid-column-end: 3;
grid-row: auto;
width: 30%;
}
.map {
grid-column-start: 3;
grid-column-end: 10;
grid-row: auto;
width: 70%;
height: 100%;
}
這邊開始我們就先寫一個簡單的程式讓頁面顯示Google map吧！
首先先宣告el 為ElementRef型態，然後在宣告一個 map為google.maps.Map型態：
接著我在一般的google map讓面隨便找一個點他會顯示經緯度，用這個經緯度當作我們等等要秀在地圖正中央的位子，這個大家自己找一個喜歡的地點試試。
畫面中 (緯度)24.980415 跟 (經度)121.548664 就是了。
把這個經緯度用一個物件紀錄如下：
接著在constructor裡面inject ElementRef做等等找DOM物件使用：
然後我們簡單的在ngOnInit() 裡面繪出地圖：
這邊就是新增一個google map 物件放到 id="map"的DOM裡面，然後把地圖的中央設定在我們剛剛經緯度(lat: 24.980415, lng: 121.548664)的位置，接著地圖放大到15的設定，
然後執行 ng server 就可以在 localhost:4200看到地圖了。
待續.......
以下是我的系統與工具版本：
OS: ubuntu 16.04 LTS
Angular Cli: 6.0.8
Angular: 6.0.0
VScode: 1.24.1
NPM: 6.1.0
Yarn: 1.7.0
首先由於Google map API必須在console上建立一個project 然後獲得一組id才能使用Google map 提供的一些功能。當然Google map API 也會有費率的問題，不過以我們單純做測試是不會到收費的程度。關於費率可以在這裡網站查閱
一開始先到Google Maps Platform 做一個建立project的動作。
點擊畫面的『開始使用』就會跳出啟用Google地圖平台的視窗，由於我們只是做地圖劃路線的功能所以我們只打勾『地圖』這個功能選項就好。
接著會要我們選擇Project，這邊我們選擇建立新的專案並取名為MyMap。
接著就會轉址到Google console 頁面並且拿到這個專案的API Key，這個Key很重要所以請先存下來。
接著我們用Angular 建立一個新專案：
# ng new googlemapapi --routing
然後我們安裝 "@types/googlemaps" 作為我們開發時會用到intellisense 跟避免build code時 compiler 對於google map api的錯誤。
# yarn add @types/googlemaps
這邊我們暫時就把用到的東西都裝好了。
關於Google maps API的說明文件其實都可以在這邊找到而且還有一些範例可以參考，不過這邊使用的單純的Javascript但是只要稍做點修改就可以套用在Angular 上面。
這邊也有人推薦一個Angular的google map 套件叫做AGM，雖然我不知道我的方式在google map其他功能上有沒有問題，但是就我需要的Google map功能上在local test 是沒問題。當然如果擔心的朋友也可以使用AGM這個套件，因為他應該是Angular 最多人用有關google map API的套件 Support上應該會比較完整。
接著我們在googlemap的angular project內 把index.html內在區加入下列code：
<script src="https://maps.googleapis.com/maps/api/js?key=你的apikey"
async defer></script>
這邊不同於官方說明文件的script是少了後方的&callback=initMap這個串字，因為官方的script是在download完map api js後直接執行initMap這個function，但是我們並不需要這個callback所以把這個callback的行為拿掉。
至於剛剛我們在google console 拿到的api key 就可以填入你的api key中
為了不弄亂Angular架構我們再新增一個Component叫做home好了。
# ng g c home
然後修改app-routing. module.ts在 const routes: Routes 修改如下：
const routes: Routes = [
{ path: '', component: HomeComponent }
];
然後記得上方要import HomeComponent進來
import { HomeComponent } from './home/home.component';
最後我們把app.component.html原先angular 產生的code拿掉，只留下
<router-outlet></router-outlet>
這行就好。這樣子就可以在ng serve開啟網頁的時候預設載入Home component這個元件在localhost:4200這串網址內。接著我們開啟home.componet.ts後把 @types/googlemap要先import 進來：
import {} from '@types/googlemaps';
然後順便import ElementRef 等等在程式內可以用來抓取DOM物件用：
import { Component, OnInit, ElementRef } from '@angular/core';
這時候我們可以先把home.component.html做點修改，讓我們等等要顯示的Google map比較方便。
至於 css 部份我這邊簡單的撰寫如下：
.container {
display: grid;
grid-template-columns: 3fr 7fr;
grid-template-rows: auto;
grid-row-gap: 5px;
justify-items: start;
justify-content: stretch;
align-items: center;
}
.showmap {
grid-column-start: 1;
grid-column-end: 10;
border: 1px solid #69a0d6;
width: 100%;
height: 400px;
display: flex;
}
.name {
font-size: 14px;
color: rgb(211, 83, 250);
display: inline-block;
grid-column-start: 1;
grid-column-end: 3;
grid-row: auto;
width: 30%;
}
.map {
grid-column-start: 3;
grid-column-end: 10;
grid-row: auto;
width: 70%;
height: 100%;
}
這邊開始我們就先寫一個簡單的程式讓頁面顯示Google map吧！
首先先宣告el 為ElementRef型態，然後在宣告一個 map為google.maps.Map型態：
el: ElementRef;
map: google.maps.Map;
接著我在一般的google map讓面隨便找一個點他會顯示經緯度，用這個經緯度當作我們等等要秀在地圖正中央的位子，這個大家自己找一個喜歡的地點試試。
畫面中 (緯度)24.980415 跟 (經度)121.548664 就是了。
把這個經緯度用一個物件紀錄如下：
position = { lat: 24.980415, lng: 121.548664 };
接著在constructor裡面inject ElementRef做等等找DOM物件使用：
constructor(private element: ElementRef) {
this.el = this.element;
}
然後我們簡單的在ngOnInit() 裡面繪出地圖：
ngOnInit() {
// only map.
this.map = new google.maps.Map(
this.el.nativeElement.querySelector('#map'),
{
center: this.position,
zoom: 15
}
);
這邊就是新增一個google map 物件放到 id="map"的DOM裡面，然後把地圖的中央設定在我們剛剛經緯度(lat: 24.980415, lng: 121.548664)的位置，接著地圖放大到15的設定，
然後執行 ng server 就可以在 localhost:4200看到地圖了。
待續.......
- Google map API + Angular 6 ---1 繪出地圖使用紀錄
- Google map API + Angular 6 ---2 加上 marker
- Google map API + Angular 6 --- 3 在使用者點擊marker 時顯示圖片。
留言
張貼留言