角度2のagm-markerにhtmlを追加するには？

アングル2のマップマーカーをagmマップでカスタマイズする方法が必要です。車両追跡アプリケーションでは、ライブ追跡コンポーネントのagm-markerを使用して現在の車両状況を表示する必要があります。私はマーカーを3種類の色で表示する必要があります（停止時には赤、停止時には黄色を表示するには緑色と言います）。また、現在走行中の車両の向きを示す必要があります。角度2のagm-markerにhtmlを追加するには？

私は多くの場所を探索しますが、マーカーに追加することができる唯一のアイコンを発見し、私は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を表示するのを手伝ってください。

私は以下の画像のように正確に出力する必要があります（Markerとその特定の車両番号を示す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」このような

に向け、次の操作が必要各車両の状態と方向に関するアイコンのリストを持っています。マーカーURLは、サービスから取得しているデータで除外する必要があります。

出典

2017-11-03 14:35:14

私はagmとangularは分かりませんが、標準的なツールであるHtml/jsでは相対的に簡単に行うことができます。

1.）運転ディレクトリの車両から2つの座標を取得します。次に、パスに沿って矢印を表示する可能性を使用します。 2）矢印で指定した座標からパスを設定し、矢印だけが表示されるようにパスを非表示にします。 3.）ラベルを間接的に（オフセット付きで）マーカーを最初の座標に設定し、マーカーを表示しない。

1台の車両の例が添付されています。おそらくあなたはそれを使うことができます。幸運、ラインハルト

<!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

ありがとうございます。しかし、私はtypescriptの形式で出力する必要があります.. –

は、私はあなたがよりよい解決策が見つからない場合に使用できる回避策を持っている：

なぜあなたは新しいマーカーを作成しないでください透明な背景と下のマージンを持つ画像ですか？また、質問に投稿したのと同じコードを使用することもできます。

誇張された例 https://imgur.com/NLyxyTB.png

出典

2017-11-09 00:01:39 Falci

これは、AGMの問題ではありませんが、それはあなたが、マーカーのためにこれだけの画像をHTMLを使用することはできませんGoogle MapsのAPI、の問題です。：thatのようなカスタムHTMLマーカーを作成するにはいくつかの回避策がありますが、残念ながらカスタムレイヤーはAGMではまだサポートされていません（(ticket)）。本当に必要な場合は、自分でカスタムマーカーを実装する必要があります。 AGM。

出典

2017-12-18 07:46:40

角度2のagm-markerにhtmlを追加するには？

答えて

関連する問題