如何將html添加到角2中的agm-marker？

我需要一種方法來使用agm map自定義Angular 2中的地圖標記。在車輛追蹤應用程序中，我必須通過實時追蹤組件中的agm-marker來顯示車輛狀態。我需要以三種不同的顏色顯示標記（比如綠色表示停止運行紅色，空閒時表示黃色），還需要顯示目前車輛行駛的方向。如何將html添加到角2中的agm-marker？

我搜索了很多地方，卻發現只有它可以添加到標記圖標和我說用iconUrl喜歡的圖標，

<agm-map> 
    <agm-marker class="mapMarker" *ngFor="let device of devices;" [latitude]="device.latitude" [longitude]="device.longitude" [iconUrl]="'/src/assets/arrow2.png'" [label]="device.name"> 
    </agm-marker> 
</agm-map>

而且我的輸出類似，

由於這看起來更尷尬，請幫助我顯示HTML，而不是標記上的圖標。

我需要輸出完全像在下面的圖像（標記以及html標籤，顯示特定的車輛號碼）。

來源

2017-10-21 Mani Raj

看看[這個圖書館]（https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel）。 – MrUpsidown

你有沒有嘗試前面提到的圖書館？如果你還在遇到問題請發佈示例代碼，再現您的問題。 – henrisycip

一次，我已經試圖改變標記樣式，數據綁定到地圖。但它不允許通過agm。無論如何下面的解決方案爲我成功。我相信您的數據服務可能能夠識別車輛的方向。

所以你需要有以下類型的JSON數據對象數組來生成標記列表。

[ 
    { 
     "latitude": 51.5238224, 
     "longitude": -0.2485759, 
     "markerUrl": "/assets/images/Map/20-red-icon.svg" 
    }, 
    { 
     "latitude": 51.238224, 
     "longitude": -0.2485759, 
     "markerUrl": "/assets/images/Map/30-green-icon.svg" 
    }, 
    , 
    { 
     "latitude": 51.4238224, 
     "longitude": -0.2485759, 
     "markerUrl": "/assets/images/Map/30-yellow-icon.svg" 
    } 
]

你應該有多個圖標可以識別車輛的方向和它的狀態。

例：

車輛行駛到北圖標名稱爲「0 - 綠 - icon.svg」
車輛行駛到西圖標名稱「270 - 綠 - icon.svg」
車輛運行西北部圖標名稱「315 - 綠 - icon.svg」
車輛採空，並引導到西南圖標名稱「225 - 紅 - icon.svg」

這樣，你必須有每個車輛狀態和方向的圖標列表。標記網址必須通過您從服務中獲取的數據來自殺。

來源

2017-11-03 14:35:14

我不知道agm和angular，但用標準工具Html/js可以做到它相對簡單。

1.）在駕駛目錄中獲取車輛的2個座標。然後使用沿着路徑顯示箭頭的可能性，所以 2.）用箭頭設置一個路徑（從給定的座標），並隱藏路徑，這樣只有箭頭可見。 3.）設置一個間接標記（帶偏移量）的標記到第一個座標系，但不顯示標記。

附加一輛車的例子。也許你可以使用它或其中的一部分。祝你好運，萊因哈德

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Simple Polylines</title> 
 
    <style> 
 
     #map {height: 100%;} 
 
     html, body {height: 100%;} 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <script> 
 

 
    function initMap() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 7, 
 
      center: {lat: 18.1, lng: 79.1}, 
 
      mapTypeId: 'terrain' 
 
     }); 
 

 
\t \t ///// Simple example for one vehicle ////// 
 
\t \t //define the arrow you will display 
 
\t \t var arrowGreen = { 
 
\t \t \t path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
 
\t \t \t fillColor: 'green', 
 
\t \t \t fillOpacity: 0.8, 
 
\t \t }; 
 
\t \t //set two points in driving direction of vehicle 
 
\t \t var dirCoordinates = [ 
 
      {lat: 18.0935, lng: 79.0741}, 
 
      {lat: 18.0936, lng: 79.0742}, 
 
     ]; 
 
     //define a poly with arrow icon (which is displayed in driving directory) 
 
\t \t var poly = new google.maps.Polyline({ 
 
      path: dirCoordinates, 
 
      strokeColor: 'green', 
 
      strokeOpacity: 0, 
 
      strokeWeight: 6, 
 
\t \t map: map 
 
\t \t }); 
 
     poly.setOptions({icons: [{icon: arrowGreen, offset: '0'}]}); 
 
\t \t //set the text as marker label without displayinge the marker 
 
\t \t var m = new google.maps.Marker({ 
 
\t \t position: new google.maps.LatLng(dirCoordinates[0]), 
 
\t \t label: { 
 
\t \t \t color: 'black', 
 
\t \t \t fontWeight: 'bold', 
 
\t \t \t text: 'TN28 AF 1416', 
 
\t \t \t }, 
 
\t \t icon: { 
 
\t \t \t url: 'none_marker.png', 
 
\t \t \t anchor: new google.maps.Point(10, -25), 
 
\t \t }, 
 
\t \t \t map: map 
 
\t \t }); 
 

 
\t \t //..... 
 
\t \t // ..more vehicles 
 
\t } 
 
    </script> 
 
\t <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
 
    </body> 
 
</html>

來源

2017-11-04 21:06:53 ReFran

謝謝，但我需要輸出形式的打字稿.. –

我有，你可以在使用的情況下，你沒有找到一個更好的解決方案解決方法：

你爲什麼不創建一個新的標記圖像，透明背景和底部邊距？你可以使用你在問題中發佈的相同代碼。

誇張的例子 https://imgur.com/NLyxyTB.png

來源

2017-11-09 00:01:39 Falci

這不是AGM的問題，這是谷歌地圖的API，它不允許你使用HTML標誌物，所以只圖像的問題。 :(有一些解決方法可以創建像that這樣的自定義HTML標記，但不幸的是，自定義圖層不受AGM支持，但(ticket)。看起來如果您真的需要這個，您必須自己實現自定義標記，而無需使用自定義Google覆蓋圖AGM。

來源

2017-12-18 07:46:40

如何將html添加到角2中的agm-marker？

回答

相關問題