web-dev-qa-db-ja.com

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

AgmマップでAngular 2のマップマーカーをカスタマイズする方法が必要です。車両追跡アプリケーションでは、ライブ追跡コンポーネントのagmマーカーを介して現在の車両ステータスを表示する必要があります。マーカーを3つの異なる色で表示するには（緑は停止中は赤、黄色はアイドル中）、現在の車両の進行方向を示す必要があります。

多くの場所を検索しましたが、マーカーに追加できるアイコンのみが見つかり、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>

そして、私の出力は

enter image description here

これはもっと厄介に見えるので、マーカーのアイコンの代わりにHTMLを表示してください。

私は、以下の画像（マーカーと特定の車両番号を示すhtmlラベル）とまったく同じように出力が必要です。

enter image description here

angulargoogle-mapstypescriptgoogle-maps-api-3google-maps-markers
8
Maniraj Murugan

私は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'
        });

                ///// Simple example for one vehicle //////
                //define the arrow you will display
                var arrowGreen = {
                        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                        fillColor: 'green',
                        fillOpacity: 0.8,
                };
                //set two points in driving direction of vehicle
                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)
                var poly = new google.maps.Polyline({
          path: dirCoordinates,
          strokeColor: 'green',
          strokeOpacity: 0,
          strokeWeight: 6,
                  map: map
                });
        poly.setOptions({icons: [{icon: arrowGreen, offset: '0'}]});
                //set the text as marker label without displayinge the marker
                var m = new google.maps.Marker({
                  position: new google.maps.LatLng(dirCoordinates[0]),
                  label: {
                        color: 'black',
                        fontWeight: 'bold',
                        text: 'TN28 AF 1416',
                        },
                   icon: {
                        url: 'none_marker.png',
                        anchor: new google.maps.Point(10, -25),
                  },
                        map: map
                });

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

データをマップにバインドした後、マーカーのスタイルを変更しようとすると。しかし、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-green-icon.svg」
  • 西に走っている車両のアイコン名「270-green-icon.svg」
  • 北西のアイコン名「315-green-icon.svg」まで走行する車両
  • 車両が停止し、南西のアイコン名「225-red-icon.svg」に誘導されました

このように、車両の状態と方向ごとにアイコンのリストが必要です。 Marker Urlは、サービスから取得しているデータを破棄する必要があります。

2
Janith Widarshana

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

1
Вова Савчук

より良い解決策が見つからない場合に使用できる回避策があります：

透明な背景と下余白で新しいマーカー画像を作成してみませんか？また、質問に投稿したのと同じコードを使用できます。

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

0
Falci