Google map API + Angular 6 ---2 加上 marker

日期：
繼上一次順利將google map api js加到專案並且能夠在頁面上面render出地圖後，接下來我們來試著在地圖上標出一個marker。樣式如下：

我們在html裡面新增一個DOM用來放一份有marker的地圖，我們依舊套用上一次寫好的CSS然後將這個加在上一次code的後面。
新的section就是我們這次要顯示的地圖。
觀念上就是我們產生一個新的google map 物件，然後再使用google Marker物件告訴Marker物件請他在 id = "map1"的DOM裡面產生出條件跟我們上一次一樣的地圖，然後在指定的經緯度(我們用上一次畫面置中的那個經緯度)畫出Mark。

 所以我們先宣告一個public 的google map 物件如下：
mapWithMark: google.maps.Map;

 接著宣告一個public google map Marker的物件：
mark: google.maps.Marker;

 然後在 ngOnInit()裡面宣告mapWithMark成為一個新的google map物件並給予相關條件。
/ map with marked.
this.mapWithMark = new google.maps.Map(
this.el.nativeElement.querySelector('#map1'),
{
center: this.position,
zoom: 15
});

 這邊跟上一次講的一樣：render在id="map1"的DOM裡面，然後地圖置中的位置為{ lat: 24.980415, lng: 121.548664}，放大比率為15。

 然後把public google map marker變數 new出來並且給予條件：
this.mark = new google.maps.Marker(
{
position: this.position, title: '測試'
});

 Marker裡面的JSON條件是告訴mark把marker畫在位置(position)的地方，並且在滑鼠游標移到marker上面時顯示"測試"這個字串(title)。其他更詳細的參數可以在官方Marker教學參考查閱。

 接著使用mark物件提供的method - setMap來告知mark物件要畫在哪個相對應的地圖上(id="map1")：
this.mark.setMap(this.mapWithMark);

 接著應該就能在localhost:4200上看到新的地圖 + mark了。

接下來我們試著畫上多個mark。
一樣我們在HTML多一個section 用來畫多個mark(id="map2")。

 觀念上多個mark其實是用一組Array放每個mark的經緯度，然後在用google maps Marker物件依序去畫在地圖上。所以我們先宣告一個Array用來存放我們要畫的marks經緯度如下：
const markersAry = [
[24.980102, 121.549126],
[24.981312, 121.546236],
[24.980622, 121.549246],
[24.982832, 121.543656],
[24.980942, 121.549966],
[24.983052, 121.547076]
];

 一樣宣告一個新的google maps Map物件來指定id="map2"為我們要render地圖的地方：
map2 = new google.maps.Map(
this.el.nativeElement.querySelector('#map2'),
{
center: this.position,
zoom: 15
}
);

 然後宣告一個新的google maps Marker在id="map2"的地圖上依序畫上mark：
let multMarks: google.maps.Marker;

markersAry.forEach((loc) => {
multMarks = new google.maps.Marker({
position: {lat: loc[0], lng: loc[1]},
map: map2
});
});

 我們用forEach直接對剛剛放經緯度的Array做每個mark處理，這邊跟上面不同的地方是Marker的JSON設定也可以直接給定要畫的地圖是哪個一個(map: map2)！就會直接在相對應的地圖上畫上mark，這個方式的缺點是不論map有沒有產生都會直接執行，所以如果map render失敗就會產生錯誤。

 最後頁面應該就會如下顯示出多個mark：

 --------待續。





留言

張貼留言